Javascript 如何将表单结果发布到它之后的另一个URL'；提交了什么？_Javascript_Php_Jquery_Ajax_Json

Javascript 如何将表单结果发布到它之后的另一个URL'；提交了什么？

javascript php jquery ajax json

Javascript 如何将表单结果发布到它之后的另一个URL'；提交了什么？,javascript,php,jquery,ajax,json,Javascript,Php,Jquery,Ajax,Json,我有一个包含客户相关信息的表单，下面是我尝试使用此表单的三项任务。 1.验证了正确的电子邮件id、手机号码等信息 2.以Josn格式发布表单数据。 3.成功提交后，我重定向到其他页面，如确认页面第一个和第二个正在工作，但我不知道在成功提交后如何重定向到其他页面 if(isset($_POST['type'])) { if($_POST['type']=="booking"){ $name = $_POST ['Name'];

我有一个包含客户相关信息的表单，下面是我尝试使用此表单的三项任务。
1.验证了正确的电子邮件id、手机号码等信息
2.以Josn格式发布表单数据。
3.成功提交后，我重定向到其他页面，如确认页面

第一个和第二个正在工作，但我不知道在成功提交后如何重定向到其他页面

    if(isset($_POST['type']))
    {
        if($_POST['type']=="booking"){
            $name = $_POST ['Name'];
            $mobile = $_POST ['Mob_Num'];
            $mail = $_POST ['Email'];    

            $query1 = "insert into customer(cust_name, cust_mobile, cust_email) values('$name','$mobile','$mail')";
            $result1=mysql_query($query1);
        }
    }
    else{
        echo "Invalid format";
    }
?>

Form.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">



<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>

<style>
label.error {
    color: red;
    font-style: italic;
    background: transparent url(images/unchecked.gif) no-repeat scroll 0 0;
    padding-left:20px;
    margin-left:10px;
}
input.error {
    border: 1px dotted red;
}
.border td {
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}
.border th {
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}
</style>


<script>
$(document).ready(function(){

    $("#register-form").validate({
        rules: {
            userName: "required",                           
            email: {
                required: true,
                email: true
            },                                              
            userContactNumber: "required"                       
        },
        messages: {
            userName: "Please enter your Name",
            userContactNumber: "Please enter your Mobile number",                           
            email: "Please enter a valid email address",                                           
        },
        submitHandler: function(form) {

            // get values from textboxs 
            var uName = $('#userName').val();
            var mailId = $('#email').val();
            var mobNum = $('#userContactNumber').val();

            // Alert for DEMO

            //alert("Name:"+uName+", Email:"+mailId+", Mob_Num:"+mobNum);

            // comment out AJAX for DEMO only

            $.ajax({
                url:"http://localhost/homes/bookService.php",
                type:"POST",
                dataType:"json",
                data:{type:"booking",Name:uName, Email:mailId, Mob_Num:mobNum },
                //type: should be same in server code, otherwise code will not run
                ContentType:"application/json",
                success: function(response){
                    //alert(JSON.stringify(response));
                    alert("1");
                    window.location.href = 'index.html';
                },
                error: function(err){
                    //alert(JSON.stringify(err));
                }
            });


            return false; // block regular submit
        }
    });

});
</script>

<title>All in One Home Services - The Next Generation of Services Provider</title>

</head>
    <body>
        <form  class="form-horizontal" id="register-form"  method="post">
            <div class="col-lg-8">      
                <div class="fieldgroup">
                    <label class="col-lg-3 control-label" for="userName">Name:<font
                        style="color: red;">*</font></label>
                    <div class="col-lg-9">
                        <input style=" height: 30px;" class="form-control" id="userName" name="userName"
                            placeholder="Full Name" value="" type="text" required>
                    </div>
                </div>

                <div class="fieldgroup">
                    <label for="email" class="col-lg-3 control-label">Email:<font
                        style="color: red;">*</font></label>
                    <div class="col-lg-9">
                        <input style="height: 30px;" class="form-control" name="email"
                            id="email" placeholder="you@example.com" value=""
                            type="text" required>
                    </div>
                </div>

                <div class="fieldgroup">
                    <label for="userContactNumber" class="col-lg-3 control-label">Mobile:<font
                        style="color: red;">*</font></label>
                    <div class="col-lg-9">
                        <input style="height: 30px; width:100%;" class="form-control" id="userContactNumber"
                            name="userContactNumber" placeholder="Mobile Number"
                            onkeypress="enableKeys(event);" maxlength="10" type="text" required>
                    </div>
                </div>
            </div>
            <input type="submit" name="submit" value="Submit form"  />
        </form>
    </body>
</html>

    if(isset($_POST['type']))
    {
        if($_POST['type']=="booking"){
            $name = $_POST ['Name'];
            $mobile = $_POST ['Mob_Num'];
            $mail = $_POST ['Email'];    

            $query1 = "insert into customer(cust_name, cust_mobile, cust_email) values('$name','$mobile','$mail')";
            $result1=mysql_query($query1);
        }
    }
    else{
        echo "Invalid format";
    }
?>

您需要在AJAX函数的成功回调中执行重定向-

$.ajax({
    url:"http://localhost/homes/bookService.php",
    type:"POST",
    dataType:"json",
    data:{type:"booking",Name:uName, Email:mailId, Mob_Num:mobNum },
    //type: should be same in server code, otherwise code will not run
    ContentType:"application/json",
    success: function(response){
        window.location.href = 'wherever.html'; // redirect on success
    },
    error: function(err){
        //alert(JSON.stringify(err));
    }
});

此外，您应该

您需要在AJAX函数的成功回调中执行重定向-

$.ajax({
    url:"http://localhost/homes/bookService.php",
    type:"POST",
    dataType:"json",
    data:{type:"booking",Name:uName, Email:mailId, Mob_Num:mobNum },
    //type: should be same in server code, otherwise code will not run
    ContentType:"application/json",
    success: function(response){
        window.location.href = 'wherever.html'; // redirect on success
    },
    error: function(err){
        //alert(JSON.stringify(err));
    }
});

此外，您应该

我无法发表评论，因此我不太确定我的答案，您可以尝试将变量传递给

$(document).ready(function(e){
//write this some where in function you can see whether its working or not 
e.preventDefault();
}

我也遇到了同样的问题？我用这个解决了它。我无法使用commnet，所以我联系到了它来回答。

我无法评论，所以我对我的答案不太确定，您可以尝试将一个变量传递给

$(document).ready(function(e){
//write this some where in function you can see whether its working or not 
e.preventDefault();
}

我也遇到了同样的问题？我用这个解决了它，因为我无法使用commnet，所以我联系起来回答它。

因为您使用的是AJAX，所以您需要使用

window.location.href='where.html'在您的成功回调中。@Jay Blanchard，谢谢您的回复，但不会重定向到其他页面。它显示在同一页上，但将数据插入数据库..您是否将代码放入成功回调中？您的浏览器控制台中是否出现任何错误？@Jay Blanchard，是的，我可以向服务器发送数据，但如果是sccuess，它不会发出警报（“1”）。我更新了代码，请检查它。因为您使用的是AJAX，所以您需要使用window.location.href='where.html'在您的成功回调中。@Jay Blanchard，谢谢您的回复，但不会重定向到其他页面。它显示在同一页上，但将数据插入数据库..您是否将代码放入成功回调中？您的浏览器控制台中是否有任何错误？@Jay Blanchard，是的，我可以向服务器发送数据，但如果是sccuess，它不会发出警报（“1”）。我更新了代码，请检查它。谢谢您的回答，我使用相同的代码，但它没有重定向，而且，我只想在插入成功时重定向。我在等待你的回复。请看我上面的评论-你的AJAX帖子不成功。检查浏览器控制台是否有错误。如果我将window.location.href='where.html'；有错误，请告诉我哪里错了，我是网络技术新手。请检查您的浏览器控制台，正如我所说的，有问题，您没有收到成功的回调。您的浏览器控制台将显示错误。谢谢您的回答，我使用相同的代码，但它没有重定向，而且，我只想在插入成功时重定向。我在等待你的回复。请看我上面的评论-你的AJAX帖子不成功。检查浏览器控制台是否有错误。如果我将window.location.href='where.html'；有错误，请告诉我哪里错了，我是网络技术新手。请检查您的浏览器控制台，正如我所说的，有问题，您没有收到成功的回调。浏览器控制台将显示错误。OP正在使用返回falseOP正在使用返回false