Question

我是ajax和jQuery的新手。我正在尝试使用ajax和jQuery获取html表单值。我得到的值，但我无法将该值传递给另一个php文件。我不知道我错过了什么..有人可以帮助我吗...

这是我的form.php文件代码：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Form</title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#submit').click(function(){
                var srt = $("#input").serialize();
                // alert is working perfect
                alert(srt);
                $.ajax({
                    type: 'POST',
                    url: 'database.php',
                    data: srt,
                    success: function(d) {
                        $("#someElement").html(d);
                    }
            });
         });
       });
    </script>
</head>
<body>
<form id="input" method="post" action="">
    First Name:<input type="text" name="firstName" id="firstName">
    Last Name: <input type="text" name="lastName" id="lastName">
   <input type="submit" id="submit" value="submit " name="submit">
</form>
<div id="someElement"></div>
</body>
</html>

这是我的database.php文件代码：

<?php
if(isset($_POST['submit']))
{
    $firstName = $_POST['firstName'];

    $lastName = $_POST['lastName'];

    echo $firstName;

    echo $lastName;
}

Answer 1

您需要添加：

return false;

到click处理程序的末尾。否则，将执行默认的提交按钮操作，并刷新页面。

另外，删除行：

if (isset($_POST['submit']))

当您在表单上调用.serialize()时，不包括提交按钮，只有在提交按钮执行正常浏览器提交时才会发送它们（如果有多个提交按钮，则允许服务器知道这是用过的。）

Answer 2

您需要执行以下操作

 $('#submit').click(function(){
                var srt = $("#input").serialize();
                // alert is working perfect
                alert(srt);
                $.ajax({
                    type: 'POST',
                    url: 'database.php',
                    data: srt,
                    success: function(d) {
                        $("#someElement").html(d);
                    }
            return false;
});

如果您不使用return false，则会触发表单默认事件。

Answer 3

您可以使用以下

$("#input").submit(function(event) {
    var srt = $("#input").serialize();
    // alert is working perfect
    alert(srt);
    $.ajax({
        type: 'POST',
        url: 'database.php',
        data: srt,
        success: function(d) {
            $("#someElement").html(d);
        }
    })
    return false;
});

Answer 4

您需要阻止点击事件的默认操作，否则将使用默认表单操作处理表单，您的ajax调用永远不会完成。

$("#input").submit(function(event) {
    event.preventDefault(); // prevent default action
    var srt = $("#input").serialize();
    // alert is working perfect
    alert(srt);
    $.ajax({
        type: 'POST',
        url: 'database.php',
        data: srt,
        success: function(d) {
            $("#someElement").html(d);
        }
    });    
});

使用ajax，jquery，php发送表单值

4 个答案: