0

フォームから情報を取得してform.phpに送信し、そこで処理されるこのコードがあります。form.phpは、＃successに入力されるはずの変数（フルネーム：$フルネームEメール：$ emailリンク：$ link命令：$ instr）をエコーし​​ます。私のコードは、FirefoxとChromeで2つの異なる方法で動作します。

Firefoxでは、出力を正しく表示するform.phpに送信されますが、明らかにそこに送信するべきではありません。メインページにとどまり、その出力を#successで確認する必要があります。基本的に、ajaxは機能しません。

Chromeでは、ajaxは機能しますが、フルネーム：メール：リンク：手順：を#successにプルするだけです。本質的に、jQueryはPOSTを介して変数を渡していません。

mainpage.php：

<script type="text/javascript">
$(document).ready(function() {
    var data = $(form).serialize();
    $('#form').submit(function(event) {   
            $.ajax({
            url: '../wp-content/themes/MC/form.php',
            type: 'POST',
            data: data,
            success: function(result) {
                $('#success').html(result);
            }
            }); 
     event.preventDefault();
     });
})
</script>

<div id="exchange_inside">
<div id="formdiv">
<br>
<form method="post" id="form">
    Name / Nom:<input type="text" name="fullname" /><br />
    E-mail / Courriel:<input type="text" name="email" /><br />                          Your Daily URL / Votre URL Quotidien:<input type="text" name="link" /><br />
    Voting Instructions / Instructions de Vote:<textarea name="instr" style="width: 450px; height: 100px;"/></textarea><br />
    <input type="submit" value="Submit" />
</form>
</div>
</div>
<div id="success">
</div>

form.php：

<?php
if (isset($_POST['fullname'])){
    $fullname = $_POST['fullname'];   
}else{
    echo "No name";
}

if (isset($_POST['email'])){
    $email = $_POST['email'];   
}else{
    echo "No email";
}

if (isset($_POST['link'])){
    $link = $_POST['link'];   
}else{
    echo "No link";
}

if (isset($_POST['instr'])){
    $instr = $_POST['instr'];   
}else{
    echo "No instructions";
}

echo "Name: " .$fullname. " E-mail: " .$email. " Link: " .$link. " Instructions: " .$instr;
?>
4

3 に答える 3

1

event.preventDefault();呼び出しの前に移動してjqueryを少し変更してみて、 ：ajaxを修正してください。var data = $("#form").serialize();

$(document).ready(function() {

    $('#form').submit(function(event) { 
        event.preventDefault();  
        var data = $("#form").serialize();
        $.ajax({
        url: '../wp-content/themes/MC/form.php',
        type: 'POST',
        data: data,
        success: function(result) {
            $('#success').html(result);
        }
        }); 

 });
}); //semicolon here

末尾にセミコロンを付けてください$(document).ready。

event.preventDefault()通話の前に移動すると、何らかの理由で失敗ajaxした場合、または通話にエラーが発生した場合に、フォームの送信が停止します。主にこのフォーム送信方法では、最初にフォームのデフォルトの動作を停止する必要があります。ajaxajax

于 2011-09-26T23:59:24.013 に答える
0

$('#form').submit次のように、ajaxなしでフォームを送信しているを削除してみてください。

$(document).ready(function() {
    var data = $('#form').serialize(); //this selector also needed to be fixed 
    $.ajax({
            url: '../wp-content/themes/MC/form.php',
            type: 'POST',
            data: data,
            success: function(result) {
                $('#success').html(result);
            }
    }); 
});

編集：
私は誤解しました。Chromeの問題を解決するには、ページが読み込まれたときではなく、送信が押された後にデータをシリアル化してみてください。

$('#form').submit(function(event) {   
        var data = $('#form').serialize(); //moved this line and fixed selector
        $.ajax({
        url: '../wp-content/themes/MC/form.php',
        type: 'POST',
        data: data,
        success: function(result) {
            $('#success').html(result);
        }
        }); 
        event.preventDefault();
 });

また、送信ボタンを通常のボタンに変更し、ajaxをそのonclickイベントにバインドしてみることもできます。これにより、ajaxを使用せずにフォームを送信する際の問題を回避し、Firefoxの問題を修正できます。

于 2011-09-26T23:54:53.467 に答える
0 
$(document).ready(function() {

    $("#form").submit(function(event) {   

         var data = $("#form").serialize();
            $.ajax({
            url: '/echo/json/',
            type: 'POST',
            data: data,
            success: function(data, status, xhr) {

                console.log(data);
                console.log(status);
                console.log(xhr);
                $('#success').html(result.responseText);
            }

            });

    event.preventDefault();
        return false;
     });
})
  1. あなたのデータの宣言はグローバルスコープではありませんでした.(私はそれを正しいローカルスコープに詰め込みました)
  2. $(form).serialize() は $("#form").serialize() と等しくありません
  3. あなたのURLを編集してください=）
  4. コードをテストするには、Jsfiddle と Firebug/Chrome Dev Tools を使用してください。

それが役立つことを願っています

于 2011-09-27T00:11:54.830 に答える