如何使用/不使用 html 表单加载带有 jQuery 变量的 $_POST 数组答案

【问题标题】：How to load $_POST array with jQuery variables with/without using html form如何使用/不使用 html 表单加载带有 jQuery 变量的 $_POST 数组
【发布时间】：2012-04-25 23:00:47
【问题描述】：

我在 $.ajax() 和 $.post() 调用中遇到了一些问题，需要将接口端的一些变量发送到服务器端 PHP 进行处理。虽然这似乎是一个微不足道的问题，并且在表格中大量报告，但我尝试了过去几天的所有选项，但没有成功。

我的场景如下：

我有一个简单的界面，绘制了一个 4X4 网格，以便用户可以单击任何位置，并且将通过运行良好的 jquery 函数记录 2D 坐标值。现在我需要通过单击用户按钮将这两个 x-y 变量发送到 PHP 以存储在数据库中。我允许用户单击多次，但有一个提交按钮，以便仅提交最终单击的值。我将所有工作都写在一个文件 test.php 中，如下所示：

<?php
$x = $_POST['xval'];
$y = $_POST['yval'];
echo "X-Value......" . "$x";
echo "Y-Value......" . "$y";
// Code to store $x and $y in database
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
var x=0;
var y=0;
$("#table").click(function(e1){
// Process x, y values from the grid..This part is working fine and tested also
})
$("#form").submit(function(event) {
    //var $form = $(this);
    //var url_s = $form.attr('action');
    var data_s = {xval: 'x', yval: 'y'};
    //$.post("test.php", { xval:"x", yval: y });
      $.ajax({ type: "POST", url: "test.php", data: {xval: 'x', yval: 'y'}});
})
});
</script>
<div class="form">
<form name="form100" id="form">
<input type="submit" name="SubmitOption" id="button" value="Next">
</form>
</div>

我将值发布在同一页面，即 test.php，因为我想处理 PHP 代码顶部的值，但我无法检索 $x、$y 中的值PHP端。我测试过以如下形式发布： ">

经过测试，我发现 $_POST 只能加载带有 method="post" action=" 的表单变量，但不能使用带有 jQuery 变量的 $.post 或 $.ajax 调用。我尝试通过从 jQuery click 函数加载表单中的两个文本区域来解决方法，然后使用带有 method="post" action=" 的表单 POST，因为现在 jQuery 变量被传输到表单变量。

如何仅使用表单提交按钮执行 AJAX 调用（$.ajax 或 $.post），并通过 $_POST 数组将 jQuery 变量传递给服务器 PHP，因为似乎 $_POST 数组只加载了来自 method="post" action=" 的表单变量，并且无法从 $.post() 和 $.ajax() 调用并将 jQuery 变量传递给 $_POST 数组。另一个问题是如何在 $_POST 数组中仅使用输入 type="button" click 传递没有表单的 jQuery 变量（尝试使用 $("#button").click(function()....但是 POST 不起作用$.ajax 和 _POST 数组为空）因为从技术上讲我不需要表单，因为我没有任何表单变量？

【问题讨论】：

您是否尝试过仅使用普通按钮并绑定到其 .click 事件？我可能是错的，但您的表单可能会在处理 .ajax 调用之前提交。
是的，我会将 PHP 放在 ajax 调用下面，或者以正确的方式放在另一个不同的文件中，以及将脚本放在它自己的文件中。
@bfink：我尝试使用普通按钮并与 click() 绑定，但无法从 $_POST 数组中检索变量。所以，问题仍然是如何使用 $.ajax 传递 jquery 变量() 或 $.put() 通过单击按钮并从 PHP 访问 $_POST 数组？
@elclanrs: 你认为把 PHP 放在 AJAX 调用下面会达到目的吗，因为 AJAX 调用是从客户端浏览器发起的，PHP 处理是在服务器端执行的，并且在这样一个情况顺序如何重要..此外，放置在不同的文件中是一种选择，但当前场景有什么问题，因为它似乎是一个非常常规的过程！

标签： php html jquery post

【解决方案1】：

试试这个

<?php
if(isset($_POST['action'])){
$x = $_POST['xval'];
$y = $_POST['yval'];
echo "X-Value......$x";
echo "Y-Value......$y";
exit;
}
?>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">

            $(function() {
            $('#button').click(function(){
            $.ajax({
            type: 'POST',
            url : 'test.php',
            data: {
            action   :'ADD' ,
            xval     :'x',
            yval     :'y'
         },
        success: function(data) {
           alert(data);
            } ,
        error : function(){
            alert('erroR');
           }
           })
         })  


$("#table").click(function(e1){
// Process x, y values from the grid..This part is working fine and tested also
})


   })
</script>
<div class="form">
<input type="submit" name="SubmitOption" id="button" value="Next">
</div>

并使用 firebug 捕捉可能的 jq-js 语法错误

【讨论】：