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 recipe通过gem协议传的是什么
  • ¥15 TS2307: Cannot find module 'cc'.
  • ¥15 100小时学会sap 书上pp章节5.22,标准成本计算逻辑?
  • ¥50 达梦数据库误删日志文件重做DAMENG01.log启动仍然-712错误
  • ¥15 cellranger化学处理类型报错
  • ¥15 用texstudio插入图片出现下面情况,怎么办
  • ¥15 ubantu 用samba挂载windows的共享文件夹,无法挂载二级目录和修改文件
  • ¥15 有没有会五轴RTCP算法,双转台AC结构。
  • ¥25 对于LSTM实践问题的疑问
  • ¥15 PHP中关于排名和显示的问题