web-dev-qa-db-ja.com

PHP file using AJAX

JQueryで$ .ajax（）関数を使用してphpファイルを呼び出そうとしていますが、機能しません。次のコードは、ページ上のボタンがクリックされたときに実行されます。

if($error === false) {
        alert($error);
        $.ajax({
            url: '/new-user.php',
            type: 'POST',
            data: {
                name: $('#name').val(),
                email: $('#name').val(),
                password: $('#name').val()
            }
        });

これは私のフォームです：

<form onClick="return false;" class="reg-form">

    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label for="name">First Name</label>
                <input type="text" id="name" class="form-control" autofocus="autofocus">
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label for="email">Email Address</label>
                <input type="text" id="email" class="form-control">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" class="form-control">
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label for="password-confirm">Confirm Password</label>
                <input type="password" id="password-confirm" class="form-control">
            </div>
        </div>
    </div>

    <button class="btn trans reg-btn">Sign Up</button>

    <div class="reg-msg">
        <span id="password-error-msg">Passwords do not match.</span>
    </div>

</form>

フォームのonClickがfalseを返すように設定して、フォームが送信されたときにページがリロードされないようにして、jQueryを実行できるようにしました。

どんな助けでも大歓迎です。

phpjavascriptjqueryajax
6
stu177

人々がformsを使用する主な理由は、

action（あなたの場合はphpスクリプト）、

メソッド（GETまたはPOST）および

送信フォーム内のすべての情報を取得して自動的にサーバーに送信するボタン。

これは、20〜30の入力がある場合、または複数のファイル入力を処理している場合に便利です。 ajax関数でデータ取得を処理している場合は、送信ボタン、アクション、またはメソッドが定義されていないため、フォームをまったく使用しないことで、作業を大幅に簡略化できます。

    $.ajax({
        url: '/new-user.php',
        type: 'POST',
        dataType: "json",
        data: {
            name: $('#name').val(),
            email: $('#email').val(),
            password: $('#password').val()
        }
    }).done(function(data){
            alert(JSON.stringify(data));
    });

簡単にするために、フォーマットdivを省略しています...

<input type="text" id="name" class="form-control" autofocus="autofocus">
<input type="text" id="email" class="form-control">
<input type="password" id="password" class="form-control">

上記のコードは、入力のデータを取得し、phpスクリプトに送信して、phpスクリプトから送り返されたデータをアラートに出力します。

そして最も重要なのは、ページが更新されないことです。

18
A.O.

コードが少ないため、実際にフォームデータをシリアル化します。さらに、複数のフォームで使用できます。たとえば、タスク番号を保持する非表示の入力を持ち、タスクを委任する1つのphpスクリプトを持つことができます。または、スクリプトの場所を渡す送信関数用の別の変数を持つことができます。したがって、私は以下のようなフォームを提出します。

HTML：

<form onsubmit="submitForm('#myForm'); return false;" id='myForm'>
     <input type='text' name='name'/>
     <input type='text' name='email'/>
     <input type='text' name='password'/>
     <input type='submit'/>
</form>

JavaScript：

function submitForm(formId){
     var formData = $.(formId).serialize();

     $.ajax({
        url: '/script.php',
        type: 'POST',
        data: formData,
        success:function(response){
           alert(response);
       }
   });

}
1
evan.stoddard

次のコードを試してください：

$(".reg-btn").click(function(e)
{
    e.preventDefault();
    $.ajax({
        url: '/new-user.php',
        type: 'POST',
        data: {
            name: $('#name').val(),
            email: $('#name').val(),
            password: $('#name').val()
        },
        success:function(response){
           //Do something here...
        }
   });
});

フォームに送信ボタンがないことに注意してください。したがって、falseを返すのは意味がありません。

0
vinayjags