时间戳

首页 > 解决方案 > 从元素 OnClick 函数调用 AJAX

javascript - 从元素 OnClick 函数调用 AJAX

问题描述

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

我有 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 但是，我需要这个功能来运行列表中的1张或多张卡，只区分系列和卡号。

任何帮助是极大的赞赏。经过几个小时的搜索，我的眼睛受伤了！

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

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 调用中看到成功/错误的数据，所以，我现在很高兴！

标签： javascripthtmljqueryajax

解决方案

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

也不要使用ajaxwithfail或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);

?>

推荐阅读