jquery - How to handle 400 status in Ajax

admin管理员组

文章数量:1130349

This question already has answers here: AJAX Implementation (2 answers) Closed 6 years ago.

I have created a page in wordpress which is hosted in localhost. The page containing two drop down lists. one is for selecting category lists from a table called 'category' and the second drop down list is depended on first, that is for selecting the subcategory from the 'subcategory' table. The category id is added to each subcategory value. The value of subcategory drop down list is depend on the category drop down and i tried to implement this using ajax.

Code of my php file named test_ajax.php

  jQuery(document).ready( function(){

      jQuery('#category').on('change',function (e){
           e.preventDefault();
          console.log("start1");
          var catId = document.getElementById('category').value;
          console.log(catId);
          jQuery.ajax({
              type: 'POST',
            url: "/mudratcr/wp-admin/admin-ajax.php",
            data: {'key':catId},
            cache: false,
            success : function (data) {
                     jQuery('#sub_cat').html(data); 
                        console.log(data);
                    }
          });
      });
  });


</script>
<form  method="post" name="myform" id="myform">
<table width="200" border="0" cellpadding="10">
  <tr>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
  </tr>
  <tr>
    <td><label>Category</label></td>
    <td><select name="category" id="category" >
          <option value="">Select the category</option>
           <?php
                global $wpdb;
                $result_fromDB = $wpdb->get_results("SELECT * FROM `category`");
                foreach ($result_fromDB as $cat) {
                       echo "<option value='".$cat->id."' selected>".$cat->name."</option>";
                }
           ?>
        </select>
    </td>
    <td></td>
  </tr>
  <tr>
    <td><label>Sub Category</label></td>
    <td>&nbsp;
        <div id="fetch_data"><select name="sub_cat" id="sub_cat">
        <option value=""> Select Sub category</option>
    </select></div>
    </td>
    <td><div id="one"><span></span></div></td>
  </tr>
</table>
</form>

functions.php-- not written the complete code.

function registerFormAction(){

        // To handle the form data we will have to register ajax action. 
        $catid = $_REQUEST['catId']; //catId is the value of category drop down list

    }add_action('wp_ajax_nopriv_submitAjaxForm','registerFormAction');
        add_action('wp_ajax_submitAjaxForm','registerFormAction');

When i run this page it shows bad request. Can anyone help me. I am a beginner . And i read many articles about ajax and word press, nothing works

This question already has answers here: AJAX Implementation (2 answers) Closed 6 years ago.

I have created a page in wordpress which is hosted in localhost. The page containing two drop down lists. one is for selecting category lists from a table called 'category' and the second drop down list is depended on first, that is for selecting the subcategory from the 'subcategory' table. The category id is added to each subcategory value. The value of subcategory drop down list is depend on the category drop down and i tried to implement this using ajax.

Code of my php file named test_ajax.php

  jQuery(document).ready( function(){

      jQuery('#category').on('change',function (e){
           e.preventDefault();
          console.log("start1");
          var catId = document.getElementById('category').value;
          console.log(catId);
          jQuery.ajax({
              type: 'POST',
            url: "/mudratcr/wp-admin/admin-ajax.php",
            data: {'key':catId},
            cache: false,
            success : function (data) {
                     jQuery('#sub_cat').html(data); 
                        console.log(data);
                    }
          });
      });
  });


</script>
<form  method="post" name="myform" id="myform">
<table width="200" border="0" cellpadding="10">
  <tr>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
  </tr>
  <tr>
    <td><label>Category</label></td>
    <td><select name="category" id="category" >
          <option value="">Select the category</option>
           <?php
                global $wpdb;
                $result_fromDB = $wpdb->get_results("SELECT * FROM `category`");
                foreach ($result_fromDB as $cat) {
                       echo "<option value='".$cat->id."' selected>".$cat->name."</option>";
                }
           ?>
        </select>
    </td>
    <td></td>
  </tr>
  <tr>
    <td><label>Sub Category</label></td>
    <td>&nbsp;
        <div id="fetch_data"><select name="sub_cat" id="sub_cat">
        <option value=""> Select Sub category</option>
    </select></div>
    </td>
    <td><div id="one"><span></span></div></td>
  </tr>
</table>
</form>

functions.php-- not written the complete code.

function registerFormAction(){

        // To handle the form data we will have to register ajax action. 
        $catid = $_REQUEST['catId']; //catId is the value of category drop down list

    }add_action('wp_ajax_nopriv_submitAjaxForm','registerFormAction');
        add_action('wp_ajax_submitAjaxForm','registerFormAction');

When i run this page it shows bad request. Can anyone help me. I am a beginner . And i read many articles about ajax and word press, nothing works

• ajax
• jquery
• mysql

Share Improve this question edited Nov 27, 2018 at 8:17 fuxia♦ 107k3939 gold badges255255 silver badges461461 bronze badges asked Nov 27, 2018 at 8:06 Agreesh V SAgreesh V S 2911 silver badge55 bronze badges 2

• i hope this link help for you:pippinsplugins/… – vikrant zilpe Commented Nov 27, 2018 at 8:22
• @avs Don't post the same question twice. You've already got an answer in your second question... – Krzysiek Dróżdż Commented Nov 27, 2018 at 8:33

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

This function will load the JS scripts:

function test_ajax_load_scripts() {
// load our jquery file that sends the $.post request
wp_enqueue_script( "ajax-test", plugin_dir_url( __FILE__ ) . '/ajax-test.js', array( 'jquery' ) );

// make the ajaxurl var available to the above script
wp_localize_script( 'ajax-test', 'the_ajax_script', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );  }
add_action('wp_print_scripts', 'test_ajax_load_scripts');

This question already has answers here: AJAX Implementation (2 answers) Closed 6 years ago.

I have created a page in wordpress which is hosted in localhost. The page containing two drop down lists. one is for selecting category lists from a table called 'category' and the second drop down list is depended on first, that is for selecting the subcategory from the 'subcategory' table. The category id is added to each subcategory value. The value of subcategory drop down list is depend on the category drop down and i tried to implement this using ajax.

Code of my php file named test_ajax.php

  jQuery(document).ready( function(){

      jQuery('#category').on('change',function (e){
           e.preventDefault();
          console.log("start1");
          var catId = document.getElementById('category').value;
          console.log(catId);
          jQuery.ajax({
              type: 'POST',
            url: "/mudratcr/wp-admin/admin-ajax.php",
            data: {'key':catId},
            cache: false,
            success : function (data) {
                     jQuery('#sub_cat').html(data); 
                        console.log(data);
                    }
          });
      });
  });


</script>
<form  method="post" name="myform" id="myform">
<table width="200" border="0" cellpadding="10">
  <tr>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
  </tr>
  <tr>
    <td><label>Category</label></td>
    <td><select name="category" id="category" >
          <option value="">Select the category</option>
           <?php
                global $wpdb;
                $result_fromDB = $wpdb->get_results("SELECT * FROM `category`");
                foreach ($result_fromDB as $cat) {
                       echo "<option value='".$cat->id."' selected>".$cat->name."</option>";
                }
           ?>
        </select>
    </td>
    <td></td>
  </tr>
  <tr>
    <td><label>Sub Category</label></td>
    <td>&nbsp;
        <div id="fetch_data"><select name="sub_cat" id="sub_cat">
        <option value=""> Select Sub category</option>
    </select></div>
    </td>
    <td><div id="one"><span></span></div></td>
  </tr>
</table>
</form>

functions.php-- not written the complete code.

function registerFormAction(){

        // To handle the form data we will have to register ajax action. 
        $catid = $_REQUEST['catId']; //catId is the value of category drop down list

    }add_action('wp_ajax_nopriv_submitAjaxForm','registerFormAction');
        add_action('wp_ajax_submitAjaxForm','registerFormAction');

When i run this page it shows bad request. Can anyone help me. I am a beginner . And i read many articles about ajax and word press, nothing works

This question already has answers here: AJAX Implementation (2 answers) Closed 6 years ago.

I have created a page in wordpress which is hosted in localhost. The page containing two drop down lists. one is for selecting category lists from a table called 'category' and the second drop down list is depended on first, that is for selecting the subcategory from the 'subcategory' table. The category id is added to each subcategory value. The value of subcategory drop down list is depend on the category drop down and i tried to implement this using ajax.

Code of my php file named test_ajax.php

  jQuery(document).ready( function(){

      jQuery('#category').on('change',function (e){
           e.preventDefault();
          console.log("start1");
          var catId = document.getElementById('category').value;
          console.log(catId);
          jQuery.ajax({
              type: 'POST',
            url: "/mudratcr/wp-admin/admin-ajax.php",
            data: {'key':catId},
            cache: false,
            success : function (data) {
                     jQuery('#sub_cat').html(data); 
                        console.log(data);
                    }
          });
      });
  });


</script>
<form  method="post" name="myform" id="myform">
<table width="200" border="0" cellpadding="10">
  <tr>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
  </tr>
  <tr>
    <td><label>Category</label></td>
    <td><select name="category" id="category" >
          <option value="">Select the category</option>
           <?php
                global $wpdb;
                $result_fromDB = $wpdb->get_results("SELECT * FROM `category`");
                foreach ($result_fromDB as $cat) {
                       echo "<option value='".$cat->id."' selected>".$cat->name."</option>";
                }
           ?>
        </select>
    </td>
    <td></td>
  </tr>
  <tr>
    <td><label>Sub Category</label></td>
    <td>&nbsp;
        <div id="fetch_data"><select name="sub_cat" id="sub_cat">
        <option value=""> Select Sub category</option>
    </select></div>
    </td>
    <td><div id="one"><span></span></div></td>
  </tr>
</table>
</form>

functions.php-- not written the complete code.

function registerFormAction(){

        // To handle the form data we will have to register ajax action. 
        $catid = $_REQUEST['catId']; //catId is the value of category drop down list

    }add_action('wp_ajax_nopriv_submitAjaxForm','registerFormAction');
        add_action('wp_ajax_submitAjaxForm','registerFormAction');

When i run this page it shows bad request. Can anyone help me. I am a beginner . And i read many articles about ajax and word press, nothing works

• ajax
• jquery
• mysql

Share Improve this question edited Nov 27, 2018 at 8:17 fuxia♦ 107k3939 gold badges255255 silver badges461461 bronze badges asked Nov 27, 2018 at 8:06 Agreesh V SAgreesh V S 2911 silver badge55 bronze badges 2

• i hope this link help for you:pippinsplugins/… – vikrant zilpe Commented Nov 27, 2018 at 8:22
• @avs Don't post the same question twice. You've already got an answer in your second question... – Krzysiek Dróżdż Commented Nov 27, 2018 at 8:33

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

This function will load the JS scripts:

function test_ajax_load_scripts() {
// load our jquery file that sends the $.post request
wp_enqueue_script( "ajax-test", plugin_dir_url( __FILE__ ) . '/ajax-test.js', array( 'jquery' ) );

// make the ajaxurl var available to the above script
wp_localize_script( 'ajax-test', 'the_ajax_script', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );  }
add_action('wp_print_scripts', 'test_ajax_load_scripts');

本文标签： jqueryHow to handle 400 status in Ajax