drze7794
2016-03-09 20:59 浏览 70

序列化表单并使用POST方法使用ajax发送序列化数据

I'm trying to serialize a form and send the serialized data with ajax using POST method ..

index.php

<form id ="form" class = "form">
        <input type = "text" name = "name" />           
        <input type = "number" name = "age" />
        <input type = "number" name = "id" />
        <input type = "submit" name = "submit"><br/>
</form>
<p id = "result"></p>

Jquery snippets

<script>
    $(document).ready(function(){
        $("#form").submit(function(){
            var data = $("#form").serialize();
            insertStudent(data);
            return false ;
        });
        function insertStudent(data){
            $.post("process.php" , { data : data} , function(str){
            $("#result").html(str);
            });                 
        }
   });
</script>

process.php

$ret = $_POST["data"];
echo "<br />".$ret["name"];

And now , the result is :

Notice: Undefined index: name in C:\xampp\htdocs\try.php on line 3

When i tried to echo $_POST["data"] the result is :

name=Ahmed&age=111&id=222

how can i use every name individually such as : $_POST["name"] ... $_POST["age"] ... $_POST["id"] ?

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答 默认 最新

  • 已采纳
    doushao1948 doushao1948 2016-03-09 21:15
        function insertStudent(data){
            $.ajax({
                url: 'process.php',
                data: data,
                type: 'POST',
                dataType: 'json',
                success: function(str){
                     $("#result").html(str);
                }
            });     
        }
    

    And then print $_POST in your PHP file :)

    点赞 评论 复制链接分享
  • doushui20090526 doushui20090526 2016-03-09 21:09

    The problem is in the way you send the data to the server:

    {data: data}
    

    turns your serialised data into one parameter in stead of a series of parameters, that serialize() collects. Just change it to:

    data
    

    EDIT (added explicit example): The following (and the above) works. If it does not work for you, you have other errors in your php code.

    index.php:

        <?php
    echo '<html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#form").submit(function(){
    
                var data = $("#form").serialize();
                insertStudent(data);
                return false ;
            });
            function insertStudent(data){
    
                $.post("process.php" , data , function(str){
                $("#result").html(str);
    
                });                 
            }
       });
    </script>
    </head>
    <body>
    <p>test of form</p>
    <form id ="form" class = "form">
            <input type = "text" name = "name" />           
            <input type = "number" name = "age" />
            <input type = "number" name = "id" />
            <input type = "submit" name = "submit"><br/>
    </form>
    <p id="result"></p>
    </body>
    </html>';
    ?>
    

    process.php:

    <?php
    print_r($_POST);
    echo "<br/>"; 
    foreach($_POST as $key=>$value){
        echo $key.": '".$value."'<br/>";
    }
    ?>
    

    results in the output:

    Array ( [name] => Whatevernameyoutype [age] => whateverageyoutype [id] => whateveridyoutype ) 
    name: 'Whatevernameyoutype'
    age: 'whateverageyoutype'
    id: 'whateveridyoutype'
    

    Instead of the loop, you can access any of the posted parameters with $_POST["KEYNAMEHERE"];

    点赞 评论 复制链接分享

相关推荐