2017-12-24 16 views
1

ページロード時に一部のデータをWebサービスに送信しようとしていて、そのページを通常通りに動作させ続けようとしています。このアイデアは、ユーザーの介入なしにページが読み込まれたときにクライアントからデータを取得し、ユーザーがそのページを正常に続行できるようにすることです。ページ上のWebサービスへのPOSTのロード

私はXMLHttpRequestを使用しています。私は、ページを更新せずにWebサービスにPOSTを実行したいときに、これが最善の方法かどうかわかりません。ここに私の現在のテストのHTMLは次のとおりです。私はセンド情報ボタンをクリックしたときに

<html> 
<body> 
    <form name="myform2" method="post" action="./login.asp"> 
     First Name: <input type="text" name="fname" /><br><br> 
     Last Name : <input type="text" name="lname" /> 
     <input type="submit" value="Submit" /> 
    </form> 


<form action="" id="myform"> 
    <input type="submit" value="send-info"/> 
</form> 

<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script> 
<script type="text/JavaScript"> 

$(document).ready(function() { 
    $(document).on('submit', '#myform', function() { 
     var http = new XMLHttpRequest(); 

     var params = ("myvar=somedata"); 
     http.open("POST", "http://127.0.0.1:3000", true); 

     http.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 

     http.send(params); 
     return false; 
    }); 
}); 
</script> 

</body> 
</html> 

は今のところデータが送信されますが、私はページを更新し、追加のロジックが後に必要とされるものは何でもできるようにすることなく、ユーザーとの対話なしにそれを送信する必要がありますそれ。私は成功なしでwindow.onloadで試しました。

私の貧しいプログラミングのスキルを失望させてください、私はJavascriptに精通していません。

答えて

3

「文書準備完了」イベントが呼び出されたときにコードが実行されるように、「送信時」を削除するだけで済みます。また、あなたはHTTP呼び出しを簡素化するために、そのAJAX機能を使用することができますjqueryのを使用している場合:

$(document).ready(function() { 
    $.ajax({ 
    type: "POST", 
    url: "http://127.0.0.1:3000", 
    data: { "myvar" : "somedata" } 
    }); 
}); 
+0

あるおかげで後ajaxコールを使用する必要があり、「上の提出」削除すると、私が行方不明何でした。私は2つのバージョンを作っています.1つはAjaxで、もう1つはバージョンがない場合です。 –

+0

クールマインドが正解としてマーキングしていますか? :) –

0

今あなたがsubmitフォーム上のデータを送信しています。だから、あなたは右のあなたのここ$(document).ready(function()はサンプル

 $(document).ready(function()({ 
myvar = somedata; 
$.ajax({ 
      url: "test.html", 
      type: "Post", 
      data: {myvar : myvar}, 
      success: function(response){ 
      //do anything here 
      } 
     }); 
}); 
関連する問題