Ajaxスクリプトが機能しない

Question

ajaxを使用して、まだリフレッシュせずにその機能を実行する代わりにphpスクリプトをロードする要求があります。そこに推測していますと、以下のAjaxスクリプト

HTML

<form action='connect_exec.php' method='post' id='connect_form' enctype='multipart/form-data'> 
    <input type='text' name='conn_id' id='conn_id' value='$ad_id'> 
    <input type='submit' name='connect' class='conn_text' id='connect' value='connect +'> 
</form> 

Ajaxリクエスト

$('#connect_form').submit(function(e) { 
    e.preventDefault(); 
    var ad_id = $('#conn_id').val(); 
    $.ajax({ 
     type: "POST", 
     url: "connect_exec.php", 
     data: ad_id 
    }).done(function(response) { 
     console.log(response); 
    }).fail(function(data) { 
     console.log(data); 
    }); 
}); 

PHP SCRIPT

require_once("db.php"); 
$db = new MyDB(); 
session_start(); 
if (isset($_POST['connect'])) { 
    $my_id = $_SESSION['log_id']; 
    $ad_id = $_POST['conn_id']; 
    $rand_num = rand(); 
    $hsql = <<<EOF 
    SELECT COUNT(hash) as count FROM connect WHERE(user_one = '$my_id' 
     AND user_two = '$ad_id') OR(user_one = '$ad_id' 
     AND user_two = '$my_id'); 
    EOF; 
    $hret = $db->querySingle($hsql); 
    if ($hret == 1) { 
     $response = "Your are already connected to '$ad_id'"; 
    } else { 
     $csql = <<<EOF 
     INSERT INTO connect(user_one, user_two, hash) VALUES('$my_id', '$ad_id', '$rand_num'); 
     EOF; 
     $cret = $db - > exec($csql); 
     if (!$cret) { 
      echo "Error connecting to '$ad_id'"; 
     } else { 
      echo "Successful"; 
     } 
    } 
} 

に何か問題がある私の ajaxの問題です

フォームは実行されますが、ページをリフレッシュせずに実行されます。 ajaxの問題は何ですか？

Answer 1

serialize()メソッドを使用して、dataというシリアル形式で送信することをおすすめします。

また、formためsubmitイベントを使用します。$('form').on('submit', function (e) {}

$('form').on('submit', function (e) { 
    e.preventDefault(); 
    $.ajax({ 
     type: "POST", 
     url: "connect_exec.php", 
     data: $('form').serialize() 
    }).done(function(response) { 
     console.log(response); 
    }).fail(function(data) { 
     console.log(data); 
    }); 
}); 

Answer 2

$('#connect').click(function(e) { 
 
     e.preventDefault(); 
 
     var ad_id = $('#conn_id').val(); 
 
     console.log(ad_id); 
 

 
     $.ajax({ 
 
      type: "POST", 
 
      url: "connect_exec.php", 
 
      data: ad_id 
 
     }) 
 
     .done(function (response) { 
 
      console.log(response); 
 
     }) 
 
     .fail(function (data) { 
 
      console.log(data); 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action='connect_exec.php' method='post' id='connect_form' enctype='multipart/form-data'> 
 
     <input type='text' name='conn_id' id='conn_id' /> 
 
     <input onclick="return;" type='submit' name='connect' class='conn_text' id='connect' value='connect +'> 
 
     </form>