どのようにしてHTMLフォームのレスポンスをページのテキストを更新するようにしますか？

私は以下のようにHTML形式をしています。私は、このPOSTの応答（文字列）がid = "answer"のテキストになるようにしようとしています。どのようにしてHTMLフォームのレスポンスをページのテキストを更新するようにしますか？

$(document).ready(function() { 
    $('#myForm') 
     .ajaxForm({ 
      target: "#answer" 
    }); 
});

私はここで間違って何をやっている？私はで構成されていform.jsと呼ばれるファイルにjQueryのフォームプラグインを使用しようとしています

<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"> </script> 
    <script src="http://malsup.github.com/jquery.form.js"></script> 
    <script src="form.js"></script> 
</head> 
<body> 
    <form id="myForm" 
      action="http://myserver.com/post-destination/" 
      method="post"> 
     <p><label>Input: <br><textarea name="formInput"></textarea></label></p> 
     <p><input type="submit" value="Submit" /></p> 
    </form> 
    <p id="answer">?</p> 
</body>

私はそれがちょっとしたものだと確信しています.HTMLフォームとjQueryに関する多くの質問がありますが、それに続いて成功していないことが分かります。私は何かをウェブから何かを試してみるのは初めてです。助けてくれてありがとう！

出典

2016-07-27 screamingnugget

を。あなたは以下のようにそれをリファクタリングすることができます：

$(document).ready(function() { 
    $('#myForm').submit(function(e) 
{ 
    var postData = $(this).serializeArray(); 
    var formURL = $(this).attr("action"); 
    $.ajax(
    { 
     url : formURL, 
     type: "POST", 
     data : postData, 
     success:function(data, textStatus, jqXHR) 
     { 
      // set the target data 
      console.log ('set the target data'); 
     }, 
     error: function(jqXHR, textStatus, errorThrown) 
     { 
      //if fails 
      console.log ('server responded something else ...'); 
     } 
    }); 
}); 
});

出典

2016-07-27 01:42:49

ありがとう！これはうまくいくように見えました。私は新しいページを読み込まないようにデフォルトの動作をオーバーライドする必要がありましたが、それ以降は動作しました。 – screamingnugget

あなたはこの試みることができる：あなたのjQueryのAjaxの呼び出しが正しくないと思わ

<head> 
    <script> 
     function text() { 
      var answer = document.getElementById("input").value; 
      document.getElementById("answer").innerHTML = answer; 
     } 
    </script> 
</head> 
<body> 
    <form id="myForm" action="http://myserver.com/post-destination/" method="post"> 
     <p><label>Input: <br><textarea id="input" name="formInput"></textarea></label></p> 
     <p><input onClick="text()" type="submit" value="Submit" /></p> 
    </form> 
    <p id="answer">?</p> 
</body>

出典

2016-07-27 01:41:54

どのようにしてHTMLフォームのレスポンスをページのテキストを更新するようにしますか？

答えて

関連する問題