JQUERY/AJAX 请求未通过和冲突

Question

我在我的页面中包含了一个联系表。在同一页面中，我有一个脚本，该脚本根据下拉列表的值获取价格。现在，当我尝试提交联系信息时，我与价格脚本发生冲突。基本上它试图运行它，我不知道为什么。提交时的联系表格也永远不会工作......我只是用URL打开一个新页面......？message = blablabla 知道出了什么问题吗？

我正在使用 Laravel 4.2，因此您看到的路由重定向到我的 php 函数。 这是JSfiddle，这是php代码：

    public function postSendMessage() {
    echo "<span class=\"alert alert-success\" >Your message has been received. Thanks!</span><br><br>";
}

Answer 1

取消点击，表单将不会提交

$("button#send").click( function(evt){
    evt.preventDefault();

---

新错误，表单有一个联系人 id，而不是一个类

data: $('form.contact').serialize(),

需要

 data: $('form#contact').serialize(),

Answer 2

这就是我在相同情况下所做的

    //For your drpbox use this code
    $(document).on("change", "#yorDropBoxId", function(){        
        dropBoxValue=$("#yorDropBoxId").val();
        var request = $.ajax({//http://api.jquery.com/jQuery.ajax/
                        url: "samePagePHPcript.php",
                        type: "POST",
                        data: { 
                              ObjEvn:"dropBoxEvent",
                              dropBoxValue: dropBoxValue //You will use $myVar=$_POST["dropBoxValue"] to retrieve the information from javascript                              
                      },
                        dataType: "json"
             });
             request.done(function(dataset){
             //If you want to retrieve information from PHP sent by JSON.  
                for (var index in dataset){ 
                    JsResponse=dataset[index].phpResponse;
                }

                 if(JsResponse test someting){
                 "do dometing"
                 control the beheaivor of your HTML elements
                 }
             }); 
             request.fail(function(jqXHR, textStatus) {
                  alert( "Request failed: " + textStatus );
             });

    });



    //To submit your form use this code. You must use Prevent default if you are using a button or using a <a> link tag to trigger the evenrmrnt
    $(document).on("click", "#btn_sendForm", function(e){
        e.preventDefault();    
        var dt={ 
                ObjEvn:"FormEvent",
                input1:$("#txt_input1").val(), 
                input2: $("#txt_input2").val(), 
                input3: $("#txt_input3").val() 
            };
        var request = $.ajax({//http://api.jquery.com/jQuery.ajax/
                            url: "samePagePHPcript.php",
                            type: "POST",
                            data: dt,
                            dataType: "json"
                 });
            request.done(function(dataset){
                 //If you want to retrieve information from PHP send by JSON.  
                    for (var index in dataset){ 
                        JsResponse=dataset[index].phpResponse;
                    }

                     if(JsResponse test someting){
                     "do dometing"
                     control the beheaivor of your HTML elements
                     }
            }); 
            request.fail(function(jqXHR, textStatus) {
                      alert( "Request failed: " + textStatus );
            });
    });  



    //In the samePagePHPcript.php you can do this:You will return your information from PHP using json like this

    $event = $_POST["ObjEvn"];

    if(event==="FormEvent"){//Event to insert in your form
    $arrToJSON = array(
            "phpResponse"=>"data you want to send to javascript",
            "asYouWant"=>"<div class=\".class1\">more data</div>"    
            );  
    echo json_encode(array($arrToJSON));

    }
    elseif(event==="dropBoxEvent"){//Event to your dropbox - if you want
    $arrToJSON = array(
            "phpResponse"=>"data you want to send to javascript",
            "asYouWant"=>"<div class=\".class1\">more data</div>"    
            );  
    echo json_encode(array($arrToJSON));


    }