如何使用jquery $.post() 方法提交表单值[重复]答案

【问题标题】：How to use jquery $.post() method to submit form values [duplicate]如何使用jquery $.post() 方法提交表单值[重复]
【发布时间】：2014-11-10 22:29:08
【问题描述】：

我有一个带有表单的主页和另一个用于处理表单值的页面这是2页的源代码

表单页面：

<meta charset="UTF-8">
<title>Form Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="process.php" method="post" id="reg-form">
        Username: <input type="text" id="username" name="username">
        <br>
        Password: <input type="password" id="password" name="password">
        <br>
        <button type="submit" id="submit-btn">Traditional Submit</button>
        <button type="button" id="post-btn">$.Post Submit</button>
</form>
<script>
    $("#post-btn").click(function(){        
        $.post("process.php",function(data){
            alert(data);
        });
    });
</script>

流程页面：

<?php
$username=$_POST["username"];
$password=$_POST["password"];
echo "Username: ".$username;
echo "<br>";
echo "Password: ".$password;?>

如果我点击“传统提交”按钮，效果很好。

但是当我点击“$.Post Submit”按钮时，我只是不断收到错误消息“Notice: Undefined Index ...”

我不知道问题出在哪里，请帮忙检查和修复，在此先感谢！

【问题讨论】：

是的，我正在尝试使用 Ajax 处理表单值并停留在主页上（而不是像使用传统表单提交那样被重定向到流程页面）

标签： javascript php jquery post

【解决方案1】：

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

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

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

【讨论】：

只需添加：action="process.php" method="post" 不再需要在 <form> 元素上，因为提交由 jQuery AJAX .post() 方法处理。

【解决方案2】：

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

<script>

    username = $("#username").val(); 
    password = $("#password").val();

    $("#post-btn").click(function(){        
        $.post("process.php", { username:username, password:password } ,function(data){
            alert(data);
        });
    });
</script>

【讨论】：

更好的是，使用serialize method
@SeanVieira 我不知道如何使用它。它的目的是什么？我一直在学习，但就是不明白:) 请告诉我
serialize 采用一种形式（或一组输入）并将所有input、select 和textarea 标签转换为适合作为正文发送的字符串HTTP POST 请求（或作为 GET 请求的查询字符串）。例如，序列化具有单个字段的表单，<input name="firstName" value="Sean"> 变为 "firstName=Sean"。
@SeanVieira 好的，谢谢，然后您只需要发布或获取名字？ :)
是的 - 那么您可以直接在 $.ajax 或其任何表亲（$.post、$.get）中使用该字符串，就像 this answer 所做的那样

【解决方案3】：

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

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

【讨论】：