jQuery AJAX 表单数据使用 PHP 序列化

Posted 2023-02-24

【中文标题】jQuery AJAX 表单数据使用 PHP 序列化

【英文标题】：jQuery AJAX form data serialize using PHP

【发布时间】：2014-07-23 08:28:06

【问题描述】：

我的代码卡住了，我需要将表单中的数据发送到 check.php 页面，然后进行处理。

这是我的代码：

AJAX 部分：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function()
var form=$("#myForm");
$("#smt").click(function()
$.ajax(
        type:"POST",
        url:form.attr("action"),
        data:form.serialize(),
        success: function(response)
            console.log(response);  
        
    );
);
);
</script>

形式：

<form action="check.php" method="post" name="myForm" id="myForm">
<input type="text" name="user" id="user" />
<input type="text" name="pass" id="pass" />
<input type="button" name="smt" value="Submit" id="smt" />
</form>
<div id="err"></div>

php部分：

$user=$_POST['user'];
$pass=$_POST['pass'];

if($user=="tony")

    echo "HI ".$user;   

else

    echo "I dont know you.";    

【问题讨论】：

那有什么问题？

当我点击按钮时，什么也没有发生...

注释 ajax 调用并在该函数中添加一个简单的警报消息并告诉它的结果。如果表单由其他代码生成或动态添加，请根据 jquery 版本使用 .on() 或 .live()。

点击按钮后使用 chrome 的检查元素。是否显示一些 javascript 错误？

您的代码是正确的。它进入 check.php 页面并在控制台中显示消息。如果你想替换 console.log(response);带有警报（响应）。

【参考方案1】：

<form method="post" name="myForm" id="myForm">

用上面的表单标签替换从表单标签中删除操作。并在 ajax 中设置 url：“check.php” 在您的情况下，它首先转到 jQuery ajax，然后再次提交表单。这就是它产生问题的原因。

我知道我回复太晚了，但我认为这会有所帮助。

【参考方案2】：

Try this its working..

    <script>
      $(function () 
          $('form').on('submit', function (e) 
              e.preventDefault();
              $.ajax(
                  type: 'post',
                  url: '<?php echo base_url();?>student_ajax/insert',
                  data: $('form').serialize(),
                  success: function (response) 
                      alert('form was submitted');
                  
                  error:function() 
                      alert('fail');
                  
              );
          );
      );
    </script>

【参考方案3】：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function()
    var form=$("#myForm");
    $("#smt").click(function()
        $.ajax(
            type:"POST",
            url:form.attr("action"),
            data:form.serialize(),
            success: function(response)
                console.log(response);  
            
        );
    );
);
</script>

这是完美的代码，没有问题..你必须在php脚本中检查。

【讨论】：

提交表单后还需要什么才能保持在同一页面上？

如果使用表单，防止在提交时重新加载页面

【参考方案4】：

我也遇到了同样的问题： 你必须在 php 端反序列化数据。

添加到您的 php 文件的开头（注意这个短版本将替换所有其他帖子变量）：

parse_str($_POST["data"], $_POST);

【参考方案5】：

您的问题出在您的 php 文件中。当您使用 jquery serialize() 方法时，您正在发送一个字符串，因此您不能将它视为一个数组。发var_dump($_post)，你就会明白我在说什么。

【讨论】：

你有解决办法吗？否则这应该是一个评论。

【参考方案6】：

试一试，但首先要确定你在服务器上的 ajax 成功时响应 console.log(response) 是什么

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function()
var form=$("#myForm");
$("#smt").click(function()
$.ajax(
        type:"POST",
        url:form.attr("action"),
        data:form.serialize(),

        success: function(response)
        if(response === 1)
            //load chech.php file  
          else 
            //show error
        
        
    );
);
);

【参考方案7】：

如下更改你的代码 -

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function()
var form=$("#myForm");
$("#smt").click(function()
$.ajax(
        type:"POST",
        url:form.attr("action"),
        data:form.serialize(),

        success: function(response)
        if(response == 1)
              $("#err").html("Hi Tony");//updated
          else 
            $("#err").html("I dont know you.");//updated
        
        
    );
);
);
</script>

PHP -

<?php
$user=$_POST['user'];
$pass=$_POST['pass'];

if($user=="tony")

    echo 1;   

else

    echo 0;    

?>

【讨论】：

是的，它是这样工作的，但是再想一想，我们不想提醒它，我们想在 div "err" 中显示结果，代码为 "success: function(response) $("#err").load("check.php"); " 但是当它一直这样做时，它会进入 else 情况并显示“我不认识你”，我做错了什么？跨度>

【参考方案8】：

试试这个

 $(document).ready(function()
    var form=$("#myForm");
    $("#smt").click(function()
    $.ajax(
            type:"POST",
            url:form.attr("action"),
            data:$("#myForm input").serialize(),//only input
            success: function(response)
                console.log(response);  
            
        );
    );
    );