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

时间:2014-06-03 05:32:25

标签: php jquery ajax forms

我被困在我的代码中,我需要将表单中的数据发送到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.";    
}

8 个答案:

答案 0 :(得分:12)

试试这个

 $(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);  
            }
        });
    });
    });

答案 1 :(得分:7)

尝试一下,但首先要确定你对服务器的ajax成功响应console.log(响应)是什么

<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
        }
        }
    });
});
});

答案 2 :(得分:4)

&#13;
&#13;
<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>
&#13;
&#13;
&#13;

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

答案 3 :(得分:1)

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

添加到php文件的开头(注意这个简短的版本会替换所有其他的post变量):

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

答案 4 :(得分:0)

按如下方式更改您的代码 -

<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;    
}
?>

答案 5 :(得分:0)

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

答案 6 :(得分:0)

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>

答案 7 :(得分:0)

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

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

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