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

2021/01/18 02:41 · php ·  · 0评论

我有一个带有表单的主页,另一个页面用于处理表单值,这里是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 ...”。

我不知道问题出在哪里,请帮助检查和解决问题,谢谢!

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

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

查看jQueryserialize方法的文档,该文档将来自表单字段的数据编码为要发送到服务器的数据字符串。

使用获取文本框的值,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>

尤尔$.post没有数据。您需要传递表单数据。您可以用来serialize()过帐表单数据。尝试这个

$("#post-btn").click(function(){
    $.post("process.php", $('#reg-form').serialize() ,function(data){
        alert(data);
    });
});
本文地址:http://php.askforanswer.com/ruheshiyongjquery-postfangfatijiaobiaodanzhi.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!