关于javascript：如何使用jquery $ .post()方法提交表单值


How to use jquery $.post() method to submit form values

本问题已经有最佳答案，请猛点这里访问。

我有一个带窗体的主页和另一个用于处理窗体值的页这是两页的源代码

表格页：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<meta charset="UTF-8">
Form Page
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
<form action="process.php" method="post" id="reg-form">
        Username: <input type="text" id="username" name="username">
       
        Password: <input type="password" id="password" name="password">
       
        <button type="submit" id="submit-btn">Traditional Submit</button>
        <button type="button" id="post-btn">$.Post Submit</button>
</form>

    $("#post-btn").click(function(){        
        $.post("process.php",function(data){
            alert(data);
        });
    });

进程页面：

1
2
3
4
5
6
<?php
$username=$_POST["username"];
$password=$_POST["password"];
echo"Username:".$username;
echo"";
echo"Password:".$password;?>

如果我单击"传统提交"按钮，它会非常好地工作。

但是当我点击"$.post submit"按钮时，我总是收到错误消息"notice:undefined index…"

我不知道问题在哪里，请帮忙检查和修复，谢谢提前！

相关讨论

您还必须选择并发送表单数据：

1
2
3
4
5
$("#post-btn").click(function(){        
    $.post("process.php", $("#reg-form").serialize(), function(data) {
        alert(data);
    });
});

查看jquery serialize方法的文档，该方法将表单字段中的数据编码为要发送到服务器的数据字符串。

相关讨论

使用val()获取文本框的值，并将其存储在变量中。通过$.post传递这些值。在使用$.Post Submit button时，实际上可以删除表单。

1
2
3
4
5
6
7
8
    username = $("#username").val();
    password = $("#password").val();

    $("#post-btn").click(function(){        
        $.post("process.php", { username:username, password:password } ,function(data){
            alert(data);
        });
    });
相关讨论

yor $.post没有数据。您需要传递表单数据。您可以使用serialize()发布表单数据。试试这个

1
2
3
4
5
$("#post-btn").click(function(){
    $.post("process.php", $('#reg-form').serialize() ,function(data){
        alert(data);
    });
});