如何使用 jquery $.post() 方法提交表单值 [英] How to use jquery $.post() method to submit form values

问题描述

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

I have 1 main page with a form and another page to process the form value here are source codes of the 2 pages

表单页面:

<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;?>

如果我点击传统提交"按钮，它运行得非常好.

if I click the "Traditional Submit" buttton, it works perfectly well.

但是当我点击$.Post Submit"按钮时，我不断收到错误信息注意:未定义索引..."

but when I click the "$.Post Submit" button, I just keep getting error msg "Notice: Undefined Index ..."

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

I can not figure out where the problem is, please kindly help check and fix, thanks in advance!

推荐答案

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

You have to select and send the form data as well:

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

查看 jQuery serialize 方法的文档，该方法对来自将字段转换为数据字符串发送到服务器.

Take a look at the documentation for the jQuery serialize method, which encodes the data from the form fields into a data-string to be sent to the server.

这篇关于如何使用 jquery $.post() 方法提交表单值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！