javascript - Ajaxポストがホームリンクにパラメータを追加

Question

私はWeb開発の経験があまりないことから始めます。この質問がかなりばかげているように聞こえるか、解決策が明らかである場合は言い訳をしますが、このサイトまたはGoogleで見つけることができないようです. 基本的に、私は 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?name=test&email=email&message=msg

しかし、_include/php/contact.php にある PHP ファイルにパラメーターを追加する必要があります。

更新: さまざまな回答を試してみましたが、すばらしい回答に感謝しますが、まだ行き詰っています。フォームのアクションを PHP ファイルに設定することを選択できますが、それはページが更新されることを意味し、これは避けたいことです。他の js スクリプトは、パラメーターが間違ったリンクに追加されているという事実を変更していないようです..

score 3 · Accepted Answer

あなたの ajax リクエストは$('.button').click()イベント内にありません。ボタンをクリックしなくてもトリガーされます。したがって、ボタンはを持つネイティブフォーム送信をトリガーするため、フォームaction=""データを GET リクエストとして追加します。

$('form').submit()ボタンクリックイベントの代わりにフォームロジックが適用されるように JavaScript コードを変更します。これにより、コード内のロジックが増加し、false を返すことによってフォームの完全なネイティブ機能を無効にします。

score 0 · Accepted Answer

フォームの "action" 属性は、フォームを送信したい PHP ページに設定する必要があります。

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

score -1 · Accepted Answer

私はそれをテストしていませんが、以下のスニペットは、私が通常使用する基本的なセットアップを示しています。

$('#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
        });
    }
});

score -2 · Accepted Answer

-2

おそらくあなたが必要ですevent.preventDefault()

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

于 2013-10-18T11:37:11.437 に答える

javascript - Ajaxポストがホームリンクにパラメータを追加

4 に答える 4

Related

Reference