jQueryでデータを挿入

-2

jQueryを使用してデータベースにデータを挿入するためのフォームを作成しようとしていますが、何も起こりませんし、問題の場所を知りたいと思っています。jQueryでデータを挿入

ここに私が書いたコードがあります。私は、誰かが私が間違いがどこにあるのか、なぜそれが何の行動を起こさないのかを助けてくれることを願っています。

のindex.html：

<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script src="insert.js"></script> 

</head> 
<body> 

<form id="form-search" method="post" action="index.html"> 
<input name="gov" id="gov" type="text" class="textinput required" maxlength="80" required><br> 

<input name="area" id="area" type="text" class="textinput required" maxlength="80" required><br> 
<button id="submit" type="button">insert</button> 
</form> 

</body> 
</html>

insert.jsコード

$(document).ready(function(e) { 
    $('#submit').click(function() { 
     var gov =$('#gov').val() ; 
     var area =$('#area').val() ; 
     $.ajex({ 
     type :'post' , 
     data :{gov:gov,area:area},  
     url :"insert.php", 
     success :function(result) { 
      alert(result); 
      } 
     }) 

    }); 
    });

insert.phpコード

<?php 
$con = mysqli_connect('localhost','user','pass','db'); 
if (!$con) { 
    die('Could not connect: ' . mysqli_error($con)); 
} 

if($_REQUEST['gov']) { 

    $gov=$_REQUEST['gov']; 
     $area=$_REQUEST['area']; 
$q="inser into gov values ('','$gov','$area')"; 
$query=mysqli_query($con,$q); 
if($query){ 
    echo "data insert " ; 
    } 
    } 
?>

出典

2017-09-21 Mohamed Bayoumi

ブラウザの開発者コンソールをご覧ください。エラーはありますか？ – David

[どのような研究努力が必要ですか]（https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users）をご覧ください。スタックオーバーフローはデバッグサービスではありません。 ***あなたの問題を研究し、投稿する前にそれをあなた自身で解決するための良い試みをすることが期待されます。 *特定の*に固執する場合は、[最小、完全、および検証可能な例]（https://stackoverflow.com/help/mcve）と、コードのデバッグ時に発見した内容の概要を含めて、私たちは助けることができます。 – FluffyKitten

あなたのブラウザのコンソールを見てください。 Theresはあなたのコードでおそらくエラーです。たとえば、あなたは '$ .ajex（'、しかし '$ .ajax（'。 – eventHandler

で（データを提出します（あなたのHTMLで）このスクリプトコンソールログをブラウザに表示）を 'insert.php'に変更します。説明のコメントをお読みください。それでも問題が解決しない場合は、PHPコードに問題がある可能性があります（PHPでは動作しません）。 ajaxはデータを 'insert.php'に送ります。これはデータ変数を受け入れ、スクリプトのajax関数にjson応答を戻すようにコード化する必要があります。

// Remove the 'e' from .ready and place in the 'click' function - this is the 'event' 
$(document).ready(function() { 

    $('#submit').click(function (e) { 
     // Stops the form from being submitted 'normally' (to index.html) 
     e.preventDefault(); 

     // Check console in your browser (this can be removed when it works) 
     console.log('submit clicked'); 

     // Define the data to be submitted with the ajax form 
     var submitData = { gov: $('#gov').val(), area: $('#area').val() }; 

     $.ajax({ 

      // Make sure your path to insert.php is complete - check console in browser to see if there is an error 
      url: 'insert.php', 
      // Make sure 'insert.php' accepts 'post' transactions 
      type: 'POST', 
      // This could be changed (when it works) to - data: { gov: $('#gov').val(), area: $('#area').val() }, 
      data: submitData, 
      // Make sure 'insert.php' returns a json result 
      dataType: 'json', 
      success: function (result) { 

       // This can be removed when it works 
       console.log('ajax success'); 

      }, 
      beforeSend: function() { 

       // This can be removed when it works 
       console.log('ajax beforeSend'); 
       // This can be removed when it works - this lists out the data submitted with the form 
       $.each(submitData, function (index, value) { 
        console.log('index: ' + index + ' value: ' + value); 
       }); 

      }, 
      complete: function() { 

       // This can be removed when it works 
       console.log('ajax complete'); 

      }, 
      error: function() { 

       // This can be removed when it works 
       console.log('ajax error'); 

      } 
     }); 

    }); 

});

出典

2017-09-22 00:56:20 RickL

）と言ったことをしましたが、何も起こりませんでした。 –

@Mohamed Bayoumi - 私は答えを更新しました。これはajax側 – RickL

開発者ツールを使用して[ネットワーク]タブを見てください。送信ボタンを押したときに何か起きているか確認してください。ステータスコードを確認してください。

出典

2017-09-22 09:21:26 rafon

答えて

関連する問題