Ajax文章將參數添加到主頁鏈接

Question

我要開始說我並沒有真正的網頁開發經驗，所以如果這個問題聽起來很愚蠢或解決方案很明顯，但我似乎無法找到它在這個網站或谷歌。基本上我有一個HTML表單，並希望將數據發佈到一個PHP腳本，將數據發送到特定的電子郵件地址。這是HTML代碼：

<form id="contact-form" name="contactform" action=""> 
    <fieldset> 
    <p class="contact-name"> 
     <input id="name" type="text" placeholder="Full Name" value="" name="name"/> 
     <label class="error" for="name" id="name_error">This field is required.</label> 
    </p> 
    <p class="contact-email"> 
     <input id="email" type="text" placeholder="Email Address" value="" name="email"/> 
     <label class="error" for="email" id="email_error">This field is required.</label> 
    </p>  
    <p class="contact-message"> 
     <textarea id="message" placeholder="Your Message" name="message" rows="15" cols="40"></textarea> 
     <label class="error" for="message" id="message_error">This field is required.</label> 
    </p> 
    <p class="contact-submit"> 
     <input type="submit" value="Submit" id="submit_button" class="button"> 
    </p> 
    </fieldset>   
</form> 

這是jQuery的& Ajax代碼來驗證數據：

$(document).ready(function() { 
    $('.error').hide(); 
    $(".button").click(function() { 
     //validate process 
     var name = $("input#name").val(); 
     if (name == "") { 
      $("label#name_error").show(); 
      $("input#name").focus(); 
      return false; 
     } 
     var email = $("input#email").val(); 
     if (email == "") { 
      $("label#email_error").show(); 
      $("input#email").focus(); 
      return false; 
     } 
     var message = $("textarea#message").val(); 
     if (message == "") { 
      $("label#message_error").show(); 
      $("textarea#message").focus(); 
      return false; 
     } 
    }); 

    var dataString = 'name='+ name + '&email=' + email + '&message=' + message; 
    $.ajax({ 
     type: "POST", 
     url: "_include/php/contact.php", 
     data: dataString, 
    }); 
    return false; 

}); 

出現在這裏是不是JS代碼不運行的事實的問題，但後添加參數到當前的鏈接，如：？訪問http // website.com/index.html的名字=測試&電子郵件=電子郵件&消息=味精

但我需要它的參數添加到我的PHP文件，該文件位於_incl ude/php/contact.php

更新：所以我已經嘗試了各種答案，並感謝偉大的答覆，但我仍然卡住了。我可以選擇將表單的動作設置爲PHP文件，但這意味着我的頁面被刷新，這是我想要避免的。其他js腳本似乎沒有改變參數被添加到錯誤鏈接的事實..

Answer 1

表單的「action」屬性需要設置到您想要提交表單的php頁面想要：

<form id="contact-form" name="contactform" action="/php/contact.php"> 

Answer 2

您的ajax請求不在$('.button').click()事件中。即使沒有點擊按鈕，也會觸發它。因此，現在該按鈕正在觸發具有action=""的本地表單提交，並因此將該表單數據附加爲GET請求。

更改javascript代碼，以便在$('form').submit()上應用formlogic而不是按鈕單擊事件;這將增加代碼中的邏輯，並通過返回false來禁用表單的完整本機功能;

Answer 3

也許你需要event.preventDefault()

http://api.jquery.com/event.preventDefault/

Answer 4

我沒有測試它，但低於snipplet顯示的基本設置我正常使用。

$('#contact-form').submit(function(event){ 
    var form = $(this); 
    if (isContactFormValid()) { 
     postData(form.serialize()); 
    } 
    event.preventDefault(); 



    function isContactFormValid() { 
     //Some logic here 
     return true; 
    } 
    function postData(data) { 
     $.ajax({ 
      type: "POST", 
      url: "_include/php/contact.php", 
      data: data 
     }); 
    } 
});