jQuery ajaxの成功関数を書く方法

Question

jQuery（一般的なWeb開発）を学び始めています。この例では、入力（ユーザー名とパスワードを送信ボタンを使用して）を.ajaxを使用してPHPページに送信することになっています。成功関数。

これはHTML（フォーム）のコードです：

<form id="form1"> 
    Enter Username : 
    <input type="text" id="userName"> 
    <br> 
    Enter Password: 
    <input type="password" id="passWord"> 
    <br> 
    <input type="submit" value="Submit" id="sub"> 
    <br> 
</form> 
<div id="result"></div> 

このjQueryのコード（3つのアラートちょうどどこ私のコードが起こって停止し、第三アラートが到達したことがないんチェックする）：

$(document).ready(function(){ 
     $("form").submit(function(){ 
      alert('clicked'); 
      var send = $(this).serialize(); 
      alert('gotData'); 
      $.ajax({ 
       type: "POST", 
       url: "login.php", 
       data: send, 
       dataType: "json", 
       success: function(msg){ 
        alert('inAjax'); 
        $("#result").html(msg.name + " " + msg.pass); 
       } 
      }); 
      return false; 
     }); 
    }); 

これは私のPHPコードです：

<?php 

$name = $_REQUEST['userName']; 
$pass = $_REQUEST['passWord']; 

$list = array('name' => $name, 'pass' => $pass); 
$c = json_encode($list); 
echo $c; 

?> 

コードが動作しない（何もWebページに表示されません）

Answer 1

まず、フォーム要素はnameの属性を持つ必要があります。 idの値は提出の目的には関係ありません。

あなただけ.post()方法使用して方がいいでしょう：それはコードを一時停止しますので、あなたがChromeを使用している場合、アラートでそれを追跡

$.post('login.php', $(this).serialize(), function(resp){ alert(resp); }); 

むしろよりは、ちょうどあなたの関数の先頭にdebugger;を入れて、インスペクタを開いてください。

Answer 2

まず、http環境でリクエストを送信しているかどうかを確認します。これを行うには、PHP built-in webserverをすばやく使用することができます。

//Choose the directory 
$ cd ~/public_html 
//Start the webserver on port 8000 
$ php -S localhost:8000 

代わりmethodにtypeプロパティを変更します。

また、サーバー側に問題がある場合は、ブラウザのdevtoolsまたはPostmanのような別のhttpクライアントを使用してリクエストを確認してください。