Question

如何使用jquery serialize功能发布表单？我试图发布表单值，但在PHP部分，值不显示。以下是我的代码：

HTML

<form name="myform"> 
    ID  : <input type="text" name="id_staff" id="id_staff">
    <select name="sort" id="sort">
        <option value="0">Choose Status</option>
        <option value="1">All</option>
        <option value="2">Pending</option>
        <option value="3">Approve</option>
        <option value="4">Not Approve</option>
    </select> &nbsp;<input type="button" id="submit" value="Papar" />
    <div id="loader"></div>
</form>

的jQuery

$(document).on("click", "#submit", function(e){
    e.preventDefault();
    var sort = $("#sort").val(),
    id_staff = $("#id_staff").val(),
    data = $('form').serialize();

    $.post('result.php',
    {
        data : data
    }, function(data){
        $("#loader").fadeOut(400);
        $("#result").html(data);
    });
});

PHP

if(isset($_REQUEST["sort"])){   
    $sort = $_REQUEST['sort'];
    $id_staff = $_REQUEST['id_staff'];

    echo "Your Id : $id_staff <p/>";
    echo "You choose : $sort";
}

如果我是console.log（数据），我会得到：id_staff=12345&sort=1

Answer 1

如果你使用.serialize，你可以摆脱这个：

 var sort = $("#sort").val(),
 id_staff = $("#id_staff").val(),

您的数据将通过.serialize：

提供，如下所示

your-url.com/sort=yoursortvalue&id_staff=youridstaff

应该是：

$(document).ready(function(e) {


     $("#myform").submit(function() {
      var datastring = $( this ).serialize();

          $.post('result.php',
        {
            data : datastring
        }, function(data){
            $("#loader").fadeOut(400);
            $("#result").html(data);
        });
        })
 })

在PHP方面，您只需使用$_GET['sort']。

访问它

修改

要查看数据，您应该定义一个ID为result的div，以便返回的结果显示在此div中。

示例：

<div id="result"></div> <form name="myform"> ID : <input type="text" name="id_staff" id="id_staff"> <select name="sort" id="sort"> <option value="0">Choose Status</option> <option value="1">All</option> <option value="2">Pending</option> <option value="3">Approve</option> <option value="4">Not Approve</option> </select>  <input type="button" id="submit" value="Papar" /> <div id="loader"></div> </form>

Answer 2

您的服务器正在接收一个类似于此字符串的字符串（如果您使用jQuery serialize（），它应该是这样的）：

"param1=someVal&param2=someOtherVal"

...这样的事情可能就是你所需要的：

$params = array();
parse_str($_GET, $params);

$params应该是一个包含所有表单元素indexes

的数组

Answer 3

我能够这样做：

<强>的jQuery

<script type="text/javascript">
    $(document).ready(function() {
        var form = $("#myform");

        $("#myform").submit(function(e) {
            e.preventDefault();
            $.ajax({
                type: "POST",
                url: 'result.php',
                data: form.serialize(),
                success: function(response) {
                    console.log(response);
                    $("#result").html(response);
                },
                error: function() {
                    alert('Error Submitting');
                }
            })
        })
    })
</script>

<强> PHP

if(isset($_POST["id_staff"])){   
    $sort = $_POST['sort'];
    $id_staff = $_POST['id_staff'];

    echo "<p>Your Id : $id_staff</p>";
    echo "You choose : $sort";
}

如果需要改进或更好的解决方案，请发表评论。

jQuery - 序列化表单后期值

3 个答案: