0

postinfo.phpjQueryで呼び出された投稿データファイルハンドラーに投稿データを送信しようとしていますが、これまでのところ作成できます。

ここに私のpost.phpコードがあります:

<HTML>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<script type="text/javscript">
$('#form_id').on('submit', function(e){
    e.preventDefault();
    $.ajax({
       type: "POST",
       url: "http://www.vemvo.com/test/postinfo.php",
       data: $(this).serialize(),
       success: function() {
         alert('success');
       }
    });
});
</script>   
<form method="post" id="form_id">
<input type="text" name="ime">
<input type="submit" id="submit" name="submit" value="Send">
</form>

ここでページを見ることができます: http://www.vemvo.com/test/post.php

私のpostinfo.phpのコードは次のとおりです。

<?PHP

$ime = $_POST['ime'];

echo "Your name is $ime";
?>

ここに postinfo.php があります - http://www.vemvo.com/test/postinfo.php

では、私の間違いはどこにあり、どうすればそれを機能させることができますか? 現在、データは送信されておらず、成功のアラートも表示されていません。

4

2 に答える 2

2

formタグがDOMに存在する前にセレクターが実行されているため、jQueryセレクターはそのフォームを見つけることができません。jQuery 関数でラップして、ドキュメントの準備が整うのを待ちます。

$(function () {
    $('#form_id').on('submit', function(e){
        // the rest of your code
    });
});

return false最後に、フォームのデフォルトの投稿アクションをさらに抑制することもお勧めします。

e.preventDefault();
$.ajax({
   type: "POST",
   url: "./postinfo.php",
   data: $(this).serialize(),
   success: function() {
     alert('success');
   }
});
return false;

現在、フォームは通常どおり投稿されています。AJAX ハンドラーはアタッチされないため (セレクターの実行時に要素が存在しないため)、通常のドキュメント レベルのフォーム ポストを行っているだけです。タグにaction属性が指定されていないため、ページはデフォルトでそれ自体に投稿されます。form現在のページで応答するだけです。

編集: また、ブラウザーが JavaScript コードをまったく実行できない可能性があるタイプミスもあります。

<script type="text/javscript">

2番目の「a」がありません。これは次のようになります。

<script type="text/javascript">
于 2013-10-20T11:57:40.607 に答える
0

  1. text/javascriptあなたは正しく綴らなければなりません

  2. ロード時にイベントハンドラーを割り当てる必要があります

  3. ここに他の人が投稿したように、 false を返す必要はありません

  4. フォームで何も送信しないでください

  5. HTML を body タグでラップする

  6. 正しい DOCTYPE を使用する

  7. ファイルについては、uploadify またはHow can I upload files asynchronously? をご覧ください。

ポイント1～6の固定コード

<!DOCTYPE html>
<html>
<head>
<title>Test Ajax</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
 $(function(){
    $('#form_id').on('submit', function(e){
      e.preventDefault();
      $.ajax({
       type: "POST",
       url: "./postinfo.php",
       data: $(this).serialize(),
       success: function() {
         alert('success');
       }
    });
  });
});
</script>
</head> 
<body>
  <form method="post" id="form_id">
    <input type="text" name="ime">
    <input type="submit" value="Send">
  </form>
</body>
</html>
于 2013-10-20T11:55:49.577 に答える