2016-12-01 24 views
0

動作しませんでしたが、何も起こりませんでした。私はすべてのエラーのための開発者向けツールをチェックし、ないエラーが現れないと成功しAJAXポストは、私はPHPはデシベルでAJAXを使用してデータをポストしようとしています

を送った後の要求は、私はAJAXせずにデータをポストするために、通常のコードをテストし、うまく動作しますが、AJAXで何も

enter image description here

が起こっていません

HTML:

<form id="form_box" action="" method="post"> 

    <h5>Body:</h5> 
    <textarea name="body" cols="30" rows="10"></textarea> 

    <div> 
     <input type="submit" name="sub_post" value="Post Ajax"> 
    </div> 

</form> 

JS:

<script 
     src="https://code.jquery.com/jquery-1.12.4.min.js" 
     integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" 
     crossorigin="anonymous"></script> 

<script> 
    // Variable to hold request 
    var request; 

    // Bind to the submit event of our form 
    $("#form_box").submit(function(event){ 

     // Abort any pending request 
     if (request) { 
      request.abort(); 
     } 
     // setup some local variables 
     var $form = $(this); 

     // Let's select and cache all the fields 
     var $inputs = $form.find("input, select, button, textarea"); 

     // Serialize the data in the form 
     var serializedData = $form.serialize(); 

     // Let's disable the inputs for the duration of the Ajax request. 
     // Note: we disable elements AFTER the form data has been serialized. 
     // Disabled form elements will not be serialized. 
     $inputs.prop("disabled", true); 

     // Fire off the request to /form.php 
     request = $.ajax({ 
      url: "/functions/post.php", 
      type: "post", 
      data: serializedData 
     }); 

     // Callback handler that will be called on success 
     request.done(function (response, textStatus, jqXHR){ 
      // Log a message to the console 
      console.log("Hooray, it worked!"); 
      // alert("Post Added successfully"); 
     }); 

     // Callback handler that will be called on failure 
     request.fail(function (jqXHR, textStatus, errorThrown){ 
      // Log the error to the console 
      console.error(
       "The following error occurred: "+ 
       textStatus, errorThrown 
      ); 
     }); 

     // Callback handler that will be called regardless 
     // if the request failed or succeeded 
     request.always(function() { 
      // Reenable the inputs 
      $inputs.prop("disabled", false); 
     }); 

     // Prevent default posting of form 
     event.preventDefault(); 
    }); 

</script> 

PHP:

<?php 
include_once('../includes/config.php'); 

$post=$db->real_escape_string($_POST['body']); 
$db->query("insert into ajax(a_post) values ('$post')"); 




?> 
+0

は[serializeArray](https://api.jquery.com/を使用してみてください含める必要がありますserializeArray /) – Amin

+0

'$ db-> real_escape_string()'あなたはmysql拡張機能を使用していますか?それが壊れていて使用するのが安全でないことを念頭に置いてください。 – Xorifelse

+0

いいえ、私はmysqliを使用します –

答えて

0

私は解決: jqueryのコードは$(ドキュメント).ready()ハンドラ

$(document).ready(function(){ 
     // Variable to hold request 
     var request; 

    // Bind to the submit event of our form 
    $("#form_box").submit(function(event){ 

     // Abort any pending request 
     if (request) { 
      request.abort(); 
     } 
     // setup some local variables 
     var $form = $(this); 

     // Let's select and cache all the fields 
     var $inputs = $form.find("input, select, button, textarea"); 

     // Serialize the data in the form 
     var serializedData = $form.serialize(); 

     // Let's disable the inputs for the duration of the Ajax request. 
     // Note: we disable elements AFTER the form data has been serialized. 
     // Disabled form elements will not be serialized. 
     $inputs.prop("disabled", true); 

     // Fire off the request to /form.php 
     request = $.ajax({ 
      url: "functions/post.php", 
      type: "post", 
      data: serializedData 
     }); 

     // Callback handler that will be called on success 
     request.done(function (response, textStatus, jqXHR){ 
      // Log a message to the console 
      console.log("Hooray, it worked!"); 
      // alert("Post Added successfully"); 
     }); 

     // Callback handler that will be called on failure 
     request.fail(function (jqXHR, textStatus, errorThrown){ 
      // Log the error to the console 
      console.error(
       "The following error occurred: "+ 
       textStatus, errorThrown 
      ); 
     }); 

     // Callback handler that will be called regardless 
     // if the request failed or succeeded 
     request.always(function() { 
      // Reenable the inputs 
      $inputs.prop("disabled", false); 
     }); 

     // Prevent default posting of form 
     event.preventDefault(); 
    }); 
    }) 
関連する問題