从元素 OnClick 函数调用 AJAX

Question

第一次在这里发帖，更多的是一个潜伏者，发现很多答案非常有帮助。我无法弄清楚我的代码，因此请寻找知道他们在做什么的专家！

我有 HTML（通过 PHP 创建），其中有一个系列中的棒球卡列表。我正在使用 Font Awesome 来显示一个复选框。当我点击复选框时，我想调用 AJAX 来更新数据库（它会添加一张卡片或从清单中删除卡片）。

我回收了一些以前的代码，这些代码确实可以工作，并且我确实在一年前编写了它，但它是通过表单提交按钮调用的。下面的代码略有不同，因为我想要调用相同的函数，但如果系列中有数百张卡片，我可能会有数百个复选框。 Font Awesome 复选框上的“点击”功能会将系列名称和卡号作为变量传递给清单功能。

最后，当我收到来自 AJAX 的成功响应时，我会使用 id 元素将类更新为带复选或不复选的复选框（如果它们从清单中添加或删除）

HTML 示例如下。第一部分是我正在使用的，但复选框不会显示，因为这里没有 Font Awesome 库。第二部分以防有人想运行它

<p>The code I'm using with Font Awesome (but won't show checkbox)</p>
<p>Series, #1<i class="fa fa-check-square-o" onclick="checklist('Series','1')" id="Series_1"></i></p>
<p>Series, #2<i class="fa fa-check-square-o" onclick="checklist('Series','2')" id="Series_2"></i></p>
<p>Series, #3<i class="fa fa-check-square-o" onclick="checklist('Series','3')" id="Series_3"></i></p>
<p>Series, #4<i class="fa fa-check-square-o" onclick="checklist('Series','4')" id="Series_4"></i></p>
<p>Series, #5<i class="fa fa-check-square-o" onclick="checklist('Series','5')" id="Series_5"></i></p>
<p>This might display better</p>
<p onclick="checklist('Series','1')">Series, #1</p>
<p onclick="checklist('Series','2')">Series, #2</p>
<p onclick="checklist('Series','3')">Series, #3</p>
<p onclick="checklist('Series','4')">Series, #4</p>
<p onclick="checklist('Series','5')">Series, #5</p>

以下是应该可以使用的 JavaScript。我的 updateChecklistTest.php 目前的代码很少，它应该返回 data.success = FALSE （用于测试目的）。问题是它直接进入 .fail 函数，所以我收到“这是故障区”的警报。

同样为了测试，我有警报告诉我传递给函数的序列号和卡号，并且确实有效，因此它正确地传递了变量。

function checklist(s, c) {
  alert("Series: " + s + ", Cardnumber: " + c); // THIS DOES WORK!

  var formData = {
    series: s,
    cardnum: c
  };

  $.ajax({
      type: 'POST',
      url: 'updateChecklistTest.php',
      data: formData,
      dataType: 'json',
      encode: true
    })
    .done(function(data) {

      if (!data.success) {
        alert(data.errors.message);
      } else {
        // ALL GOOD! 

        alert('we are good');
      }
    })

    .fail(function(data) {

      alert('this is failure zone'); // This code ends up here
      alert(data.errors.message);
    });
}

如果这有帮助，这是我的 PHP 代码，试图强制出错

$errors = array(); // array to hold validation errors
$data = array(); // array to pass back data

$series = $_POST['series'];
$cardnum = $_POST['cardnum'];

$errors['message'] .= $series."\n";
$errors['message'] .= $cardnum."\n";


$errors['message'] = "Here are the following errors IN THE GOOD FIELD:\n".$errors['message'];
// if there are items in our errors array, return those errors
$data['success'] = false;
$data['errors'] = $errors;


// return all our data to an AJAX call
echo json_encode($data);

感觉解决方法和这里的解决方法差不多：OnClick Send To Ajax 但是，我需要这个函数来为列表中的一张或多张卡运行，只区分系列和卡号。

非常感谢任何帮助。找了好几个小时眼睛都疼！

已解决的问题 （对于那些觉得有帮助的人）

AlwaysHelping 的响应帮助清理了 AJAX 代码，我仍然可以在 Font Awesome 标记中使用我的 OnClick 功能。因此，这是获取 AJAX 设置的一个很好的参考。

此页面是动态创建的，我认为这会导致问题。 Firefox console.log 有这个消息： “跨域请求被阻止：同源策略不允许读取 xxxxxx/updateChecklistTest.php 处的远程资源。（原因：CORS 标头‘Access-Control-Allow-Origin’缺失）。”

查看了 Firefox 的描述后，我在 Stack Overflow 上找到了这个解决方案：htaccess Access-Control-Allow-Origin

将该文本添加到我的 .htaccess 文件中解决了这个问题，我现在可以在我的 AJAX 调用中看到成功/错误的数据，所以，我现在非常高兴！

Answer 1

您的 PHP 文件正在抛出 error，因为 $errors['message'] 已定义 multiple 次。您可以将错误message 保存在变量中，用于$errors['message']。

也不要使用ajax 和fail 或done，只需使用success 和error 函数来determine 出了什么问题。您可以使用相同的HTML，因为您在上面发布的HTML 中没有任何内容。

你的最终code 应该是这样的：

jQuery

function checklist(s, c) {

  var formData = {
    series: s,
    cardnum: c
  };

  $.ajax({
    type: 'POST',
    url: 'file.php',
    data: formData,
    dataType: 'json',
    success: function(data) {
      if (!data.success) {
        console.log(data.errors.message);
      } else {
        // ALL GOOD! 
        console.log('we are good');
      }
    },
    error: function() {
      console.log('this is failure zone'); // This code ends up here
      console.log(data.errors.message);
    }
  })
}

PHP

<?php

$errors = array(); // array to hold validation errors
$data = array(); // array to pass back data

$series = $_POST['series'];
$cardnum = $_POST['cardnum'];

$myData = $series."\n".$cardnum;

$errors['message'] = "Here are the following errors IN THE GOOD FIELD:\n".$myData;
// // if there are items in our errors array, return those errors
$data['success'] = false;
$data['errors'] = $errors;

// return all our data to an AJAX call
echo json_encode($data);

?>