web-dev-qa-db-ja.com

Wordpress Ajaxは常に404エラーを返す

このコードはチュートリアルから入手したばかりです。うまくいかないようです。

HTML（home.php）

    <form name="myform" id="myform" action="" method="POST">  
      <!-- The Name form field -->
      <label for="name" id="name_label">Name</label>  
      <input type="text" name="name" id="name" size="30" value=""/>  
      <br>
      <!-- The Email form field -->
      <label for="email" id="email_label">Email</label>  
      <input type="text" name="email" id="email" size="30" value=""/> 
      <br>
      <!-- The Submit button -->
      <input type="submit" name="submit" value="Submit"> 
   </form>
   <!-- We will output the results from process.php here -->
   <div id="results"><div>

PHP（function.php）

    function myform(){
       echo "Form submitted successfully: <br>Your name is <b>".$_POST['name']."</b> and your email is <b>".$_POST['email']."</b><br>"; 
    }
    add_action('wp_ajax_myform', 'myform');
    add_action('wp_ajax_nopriv_myform', 'myform');

Javascript（header.php）

    <script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("#myform").validate({
        debug: false,
        rules: {
            name: "required",
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            name: "Please let us know who you are.",
            email: "A valid email will help us get in touch with you.",
        },
        submitHandler: function(form) {
            // do other stuff for a valid form
            jQuery.post('/wp-admin/admin-ajax.php', jQuery("#myform").serialize(), function(data) {
                jQuery('#results').html(data);
            });
        }
    });
});
</script>
phpjqueryajaxjavascripthtml
2
user1526570

これは理解するのに非常にイライラしました。私はこの問題に何時間もかけて、あなたの問題がこのインプットにあることを発見しました：

<input type="text" name="name" id="name" size="30" value=""/>

入力フィールド名を "name"以外に変更してみてください。例えば：

<input type="text" name="user_name" id="name" size="30" value=""/>
6
Dream Ideation

AJAXリクエストで404を受け取った場合は、パスが間違っています。パスをハードコーディングするのではなく、admin_urlを使用してパスを作成します。

jQuery.post(<?php admin_url('admin-ajax.php') ?>, // ...

テンプレートに直接印刷するよりも、 wp_localize_script を介してJavascript変数に管理URLアドレスを印刷するほうがおそらく賢明です。例えば：

wp_enqueue_script('jquery');   
wp_localize_script( 'jquery', 'my_ajax_vars', array(
    'ajaxurl'       => admin_url( 'admin-ajax.php' )
);

スクリプト、特にheader.phpをテンプレートに直接書くよりも、 登録 および エンキュー スクリプトをオフにしたほうがよいでしょう。書かれているように、あなたのjavascriptがすべてのページにロードするものであり、私はそれがすべてのページに必要であるとは思わない。

1
s_ha_dum

まず第一に、あなたのすべてのデータを無害化する。

次に、これを行います。

jQuery(function($){
    $("#myform").validate({
        debug: false,
        rules: {
            name: "required",
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            name: "Please let us know who you are.",
            email: "A valid email will help us get in touch with you.",
        },
        submitHandler: function(form) {
            // do other stuff for a valid form
            //if you don't have your script localized and you will add it in header.php (not a good practice)
            $.post(
               '<?php echo admin_url('admin-ajax.php); ?>',
               form.serialize(),
               function(data){
                   //just to check the data
                   console.log(data);
                   $('#results').html(data);
               }

            });
            jQuery.post('/wp-admin/admin-ajax.php', jQuery("#myform").serialize(), function(data) {
                jQuery('#results').html(data);
            });
        }
    });
});

そしてあなたのphp（functions.php）ファイルの中で：

必ずdie（）を追加してください。機能の最後に。

function myform(){
       echo "Form submitted successfully: <br>Your name is <b>".$_POST['name']."</b> and your email is <b>".$_POST['email']."</b><br>"; 
       die();
    }
    add_action('wp_ajax_myform', 'myform');
    add_action('wp_ajax_nopriv_myform', 'myform');
0
jepser

あなたは（wp）アクションをフォームまたはjQueryのajax関数に入れるのを忘れていました。

フォームに<input type="hidden" name="action" value="myform">を追加すると、それはあなたのajax関数をフックします。

0
Rob Vermeer