1

私は Ajax の初心者で、jquery を使用して単純な ajax サンプルを作成しようとしています。送信ボタンをフォームタグに配置すると、何らかの理由で $.post が機能しません。ここに私のcreat_user.phpがあります：

<?php
$user_login = $_REQUEST['login_name'];
echo $user_login;
?>

これが私のhtmlです：

<form id='create_user_form'>
    <p><label>Login Name : </label><input type='text' name = 'login_name'></p>
    <p><label>Password : </label><input type='password' name='login_pw'></p>
    <p><label>Re-Enter Password : </label><input type='password' name='login_pw2'></p>
    <p><label>Email : </label><input type='email' name='email'></label></p>
    <p><label>Date of Birth : </label><input type='date' name='date'></p>
    <p><input type='submit' name='submit' id='create' value='create'></p>  
</form>

そしてjquery：

$(document).ready(function(){
    $("#create_user_form").submit(function(){
        var serialize = $(this).serialize();
        alert('Here');
        $.post("create_user.php",serialize,function(response){
            alert('Here2');
            alert(response);
            console.log("Response: "+response);
       });
   });
});

何らかの理由で、alert('Here2') が発生することはありませんが、フォーム タグから送信ボタンを移動すると機能します。(jquery コードでセレクターを変更し、submit() を変更して click () ):

<form id='create_user_form'>
    <p><label>Login Name : </label><input type='text' name = 'login_name'></p>
    <p><label>Password : </label><input type='password' name='login_pw'></p>
    <p><label>Re-Enter Password : </label><input type='password' name='login_pw2'></p>
    <p><label>Email : </label><input type='email' name='email'></label></p>
    <p><label>Date of Birth : </label><input type='date' name='date'></p>         
</form>
    <p><input type='submit' name='submit' id='create' value='create'></p>

SO、送信ボタンをフォームタグに配置すると、私のコードに何か問題があると .post() が機能しなくなりますか?

4

3 に答える 3

3

多分あなたは追加する必要があります

 return false;

サブミットイベントで？

于 2013-06-12T08:54:09.333 に答える
2

あなたが見つからないreturn falseかpreventDefault()、送信ハンドラーにいます:

$("#create_user_form").submit(function(){
    ...
    return false;
});

または

$("#create_user_form").submit(function(e){
    e.preventDefault();
    ...
});

これにより、ajax リクエストが送信された後にブラウザがフォームを送信できなくなります。

于 2013-06-12T08:54:56.237 に答える
0

デフォルトのフォーム送信は、Ajax呼び出しが戻る前に行われています。フォームのデフォルト アクションを防止する必要があります。

$(document).ready(function(){
    $("#create_user_form").submit(function(e){
        e.preventDefault(); //do not submit the form.
        var serialize = $(this).serialize();
        alert('Here');
        $.post("create_user.php",serialize,function(response){
            alert('Here2');
            alert(response);
            console.log("Response: "+response);
       });
   });
});
于 2013-06-12T08:55:16.997 に答える