如何使用 jquery $.post（）方法提交表单值

php javascript jquery post

2022-08-30 13:03:48

我有1个带有表单的主页面和另一个页面来处理表单值，这里是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;?>

如果我点击“传统提交”屁股，它工作得很好。

但是当我点击“$.发布提交“按钮，我只是不断收到错误消息”注意：未定义的索引...”

我无法弄清楚问题出在哪里，请帮助检查和修复，提前致谢！

答案 1

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

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

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

答案 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>

如何使用 jquery $.post（） 方法提交表单值

如何使用 jquery $.post（）方法提交表单值