0

我是 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;
}
4

4 回答 4

2

您需要添加：

return false;

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

另外，删除该行：

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

调用表单时不包括提交按钮.serialize()，它们仅在提交按钮执行正常浏览器提交时发送（如果有多个提交按钮，这允许服务器知道使用了哪个按钮）。

于 2013-07-26T04:37:51.397 回答
0

您需要执行以下操作

 $('#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，表单默认事件将触发。

于 2013-07-26T04:40:12.293 回答
0

您可以使用如下

$("#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;
});
于 2013-07-26T04:45:16.770 回答
0

您需要阻止单击事件的默认操作，否则将使用默认表单操作处理表单，并且您的 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);
        }
    });    
});
于 2013-07-26T04:49:11.870 回答