用AJAX处理表单数据

时间:2017-11-23 作者:Martin Tee

我有一张下面的表格

 <form id="language-registration">
   <?php
    global $wpdb;
  $results=$wpdb->get_results(\'SELECT * FROM keeled;\', ARRAY_A);
  $keeled=$wpdb->get_results(\'SELECT `id`, `keel`, COUNT(keel) as `count` FROM `voorkeel` GROUP BY keel;\', ARRAY_A);
  ?>
  <?php foreach($keeled as $k) { ?>
  <p>
  <?php echo $k[\'keel\'] . " " . $k[\'count\'] . "/20";?>
  </p>
  <?php }?>
  <p>
  <label for="name">Nimi</label>
  <input type="text" name="nimi" id="nimi" value=" " size="30" tabindex="1" />
  </p>
  <p>
  <label for="klass">Klass</label>
  <input type="text" name="klass" id="klass" size="30" value=" " tabindex="2" />
  </p>
  <p>
  <label for="keel">Keel</label>
  <select name="keel" id="keel">
  <option selected="selected">Vali keel</option>
  <?php
    foreach($results as $r) { ?>
      <option value="<?php echo $r[\'keel\'] ?>"><?php echo $r[\'keel\'] ?></option>
  <?php
    } ?>
</select> 
  </p>
  <p>
  <input type=\'button\' id=\'submit\' name=\'submit\' value=\'Submit\'/>
  </p>
  </form>
这是我的ajax回调函数。php

function post_language(){
  $nimi = $_POST[\'nimi\'];
  $klass = $_POST[\'klass\'];
  $keel= $_POST[\'keel\'];
  global $wpdb;
  $wpdb->insert(
    \'voorkeel\',
    array(
      \'nimi\' => $nimi,
      \'klass\' => $klass,
      \'keel\' => $keel
     ),
    array(
      \'%s\'
    )
  );

  die();
  return true;
  }
  //
  add_action(\'wp_ajax_post_post_language\', \'post_post_language\'); // Call when user logged in
  add_action(\'wp_ajax_nopriv_post_language\', \'post_language\'); // Call when user in not logged in
  function add_our_script() {

   wp_register_script( \'ajax-js\', get_template_directory_uri() . \'/scripts/keeled.js\', array( \'jquery\' ), \'\', true );
   wp_enqueue_script( \'ajax-js\' );

   }
   add_action( \'wp_enqueue_scripts\', \'add_our_script\' );
这是我的龙骨。js公司

jQuery(document).ready(function() {
    jQuery("#submit").click(function() {
        var nimi = jQuery("#nimi").val();
        var klass = jQuery("#klass").val();
        var keel = jQuery("#keel").val();
        jQuery.ajax({
            cache: false,
            type: \'POST\', // Adding Post method
            url: "/wp-admin/admin-ajax.php", // Including ajax file
            data: { "action": "post_language", "nimi": nimi, "klass": klass, "keel": keel }, // Sending data dname to post_word_count function.
            success: function(data) { // Show returned data using the function.
                alert(data);
            }
        });
    });
});
但什么都没发生?我第一次尝试在wordpress中通过ajax将数据输入数据库。

1 个回复
SO网友:dperezac

这种使用AJAX在db中插入数据的方法对我很有用。希望这对你有帮助。

函数脚本

function add_our_script() {
   wp_register_script( \'ajax-js\', get_template_directory_uri() . \'/scripts/keeled.js\', array( \'jquery\' ), \'\', true );
   wp_localize_script( \'ajax-js\', \'ajax-js_ajax\', array( \'ajax_url\' => admin_url( \'admin-ajax.php\' ) ) );

}
add_action( \'wp_enqueue_scripts\', \'add_our_script\' );
模板形式:

<form>
    <label for="nimi">Nimi</label>
    <input name="nimi" id="nimi" type="text"/>

    <input id="nimi_submit" type="button" value="Send">
</form>
在龙骨上。js公司

jQuery(\'#nimi_submit\').click( function () {

    var nimi = jQuery(\'#nimi\').val();

    jQuery.ajax({
        url: ajax-js_ajax.ajax_url,
        type: "POST",
        data: {
            \'action\': \'post_language\',
            \'nimi\': nimi,

        },
        success: function (data) {
            alert(data);
        }
    });

});
回调操作

function post_language(){

    global $wpdb;

    $nimi = isset( $_POST[\'nimi\'] ) ? $_POST[\'nimi\'] : \'\';

    $table = \'voorkeel\';

    $wpdb->insert( $table, array(\'nimi\' => $nimi));
}
add_action(\'wp_ajax_post_language\', \'post_language\');

结束

相关推荐

如何加载管理-AJAX更快,而无需初始化所有插件?

我面临着wp-ajax性能的问题。我正在初始化javascript端的ajax调用,但响应需要3-5秒才能返回。我知道管理ajax调用必须加载整个wp核心,这肯定会对我们的性能造成影响。有没有办法仍然使用admin ajax调用,但不加载所有插件?实际上,在我的php api中,我只使用了wp config中的一些值。或者在我的用例中有没有更好的ajax建议?是否可以使用常规rest API(无需通过管理ajax),但仍然可以使用wp配置中的值?下面是我的js代码(ajax.js):jQuery.ajax