donglinyi4313 2018-05-15 14:47
浏览 69
已采纳

WordPress使用js ajax和php将变量从客户端传递到服务器并返回

a plugin provides 3 html elements 2 text inputs and 1 button to save it enter image description here

The code in my plugin php file, to provide the elements:

<?php
   /*
   Plugin Name: WSN Plugin
   description: Maintain all the connections to LimeSurvey
   Version: 0.2
   Author: M.Huber
   Author URI: www
   License: GPL2
   */

add_action( 'wp_enqueue_scripts', 'ajax_test_enqueue_scripts' );
function ajax_test_enqueue_scripts() {
    wp_enqueue_script( 'test', plugins_url( '/test.js', __FILE__ ), array('jquery'), '1.0', true );
}

if($_POST['action'] == 'call_this') {
    echo "test";
}

function wpb_new_company(){
    echo '<input type="text" class="form-control" id="companyName" placeholder="Firmenname">';
    echo '<input type="text" class="form-control" id="companyYear" placeholder="Jahr">';
    echo '<button onclick="callAjax()" id="btnNewCompany" type="submit" class="btn btn-primary">Erstellen</button>';
    echo '<div id="result">Hier steht das resultat</div>';
}

add_shortcode('new_company', 'wpb_new_company');

so on the related wordpress page i added the shortcode [new_company] and as you can see on the screenshot above it is loaded corectly.

to catch the onclick function i use a plugin specific js file:

function callAjax(){
    $.ajax({
        type: "POST",
        url: 'http://localhost/wp/',
        data:{action:'call_this'},
        success:function(response) {
        alert(response);
        $('#result').html(response);
        }
    });
}

But after i click the button i do not just get back the echo string but the whole header of the page itself, see screenshot below: enter image description here

Why is it passing some parts of the header as well as my echo command? and how can i pass variables from the js file to the php file and back?

Additional Information: If i change the ajax post url to

url: 'http://localhost/wp/wp-content/plugins/wsn-plugin/wsn-plugin.php',

i get the following error and was advised in other posts that you should not do it like that so how should i do it?

enter image description here

Fatal error: Uncaught Error: Call to undefined function add_action() in C:\xampp\htdocs\wp\wp-content\plugins\wsn-plugin\wsn-plugin.php:11 Stack trace: #0 {main} thrown in C:\xampp\htdocs\wp\wp-content\plugins\wsn-plugin\wsn-plugin.php on line 11
  • 写回答

2条回答 默认 最新

  • dstnlhhv791576 2018-05-15 15:12
    关注

    @kratze is correct for why it is just returning the entire site. To expand on his answer:

    You need to send the ajax request to the appropriate url for all wordpress ajax calls. Add

    wp_localize_script( 'test', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
    

    right below (but in the same function still)

    wp_enqueue_script
    

    Now you should be able to use ajax_object.ajax_url for the url in your js file.

    But that's not alllllll. Now it will be sending the ajax request to the appropriate url but that url isn't going to know what to do with the request, because right now you are expecting your plugin file to run and catch the request with $_POST['action'] check.

    Replace:

    if($_POST['action'] == 'call_this') {
        echo "test";
    }
    

    With:

    add_action( 'wp_ajax_call_this', 'stckvrflw_my_action' );
    add_action( 'wp_ajax_nopriv_call_this', 'stckvrflw_my_action' );
    function stckvrflw_my_action() {
        echo 'Did we get here?';
        wp_die();
    }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 ghpython这里总是报错而且rhino视图窗口内不显示怎么办
  • ¥15 布尔运算推导,请证明
  • ¥15 有没有人会打学生成绩管理系统呀
  • ¥15 在使用Fiddler和夜神模拟器抓包的时候一直出现443该怎么办啊QAQ搜了好几个笔记都没有解决
  • ¥15 3x7的二维数组A、B、C,A中的任意1个数组元素与B的任意1个数组元素、同时又与C的任意1个数组元素比较,把不同位置出现相同数的比较称为无意义,反之称为有意义,把有意义的比较打印输出。
  • ¥20 预测模型怎么处理原始数据(随机森林)
  • ¥20 请问discuz3.5如何实现插入ckplayer全能播放器功能呢?
  • ¥15 thingsboard代码编译出错误
  • ¥15 博途v18仿真报错怎么解决
  • ¥15 欧姆龙plc枕式包装机 ST编程