【问题标题】：How do I send a variable name and its value to the server and receive back a calculated response如何将变量名称及其值发送到服务器并接收计算的响应
【发布时间】：2017-06-03 18:26:05
【问题描述】：

我是 wordpress 和插件的新手，但对 php、javascript 和 html 有一定的了解。我为 wordpress 创建了一个插件，它生成一个页面（表单），该页面收集有关产品规格的信息。 [它实际上是许多顺序形式，但为简单起见，我们假设它是一个。我不想“提交”表格，因为每个表格上有很多字段，我不想在完成之前“提交”，他们准备好进入下一个表格]。

我希望能够在用户更改参数时（重新）计算产品价格。为此，我希望能够将更改参数的名称及其值传递回服务器（存储计算的所有相关数据），然后进行计算并返回新价格。目前我有一个javascript函数，它使用“onChange”上的相关数据调用，然后修改代表总价的div。如果我在本地计算该值，则此方法有效，但现在我希望通过将数据发送到服务器并接收计算的响应来完成该功能，例如：

function total_price(arg,value) {

   ***** send arg and value to server *****

   ***** receive total_price back from server *****

    var total_div = document.getElementById("total_price");
    total_div.innerHTML = "&pound;"+total_price;
}

我应该在这里输入什么代码，服务器上应该有什么代码才能接收数据、进行计算并发回结果？

【问题讨论】：

请参阅：XmlHttpRequest 在其响应事件处理程序（又名 AJAX）中发出请求和更新页面。

标签： javascript php wordpress server

【解决方案1】：

我主要在前端加载了 jQuery，所以我将使用 jQuery 框架发布答案。如果您不想加载 javascript 库，您很可能会在其他地方找到一个不错的 vanilla sn-p。

前端

var html_price = 1; // Whatever you need here

// You'll notice that the ajaxurl variable below, is sent to the front-end in the second code snippet of this answer
$.post( ajaxurl, {
    action: "get_total_price", // action is a special parameter Wordpress is listening for
    price: html_price
}).done( function( price ) {
    // Price back from the server you can use in the DOM
    // You should probably send this using JSON, this example only uses a string
    console.log( price ); 
});

后端

// Here is where Wordpress is waiting for that special action parameter
// https://codex.wordpress.org/Plugin_API/Action_Reference/wp_ajax_(action)

add_action( 'wp_ajax_get_total_price', 'get_total_price' );
add_action( 'wp_ajax_nopriv_get_total_price', 'get_total_price' );    

function get_total_price() {
    $price = $_POST[ 'price' ];

    if( $price ) {

        // do with the price what you want
        echo $price; // Echo instead of return
        exit; // Remember to close up the server response here

    } else {

        echo '0'; // Unrealistic, but guarantees a response
        exit;

    }
}

// Send the AJAX URL to the front end. There are more elegant ways to do this, but for the purpose of this answer, this should work.
add_action( 'wp_head', 'add_ajaxurl_to_head' );
function add_ajaxurl_to_head() { ?>
    <script>
        ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
    </script>
<?php }

【讨论】：

还有一个很棒的、更深入的回答，涵盖了类似的问题，在这里：stackoverflow.com/questions/18259241/…
感谢您的帮助，我现在有：
谢谢，这行得通（经过一些修改以适应 wordpress），但我需要将 jquery.post 更改为 jquery.ajax 以使用 jquery.ajax 的扩展参数。我试过替换：
谢谢，这部分工作，但我需要将表单 jquery.post 更改为 jquery.ajax。我尝试替换： jQuery.post( ajaxurl, { action: "ghmp", arg: hw_arg, val: hw_value }).done (function( hw_total ) { hardware_div.innerHTML = hw_total; }); with jQuery.ajax(ajaxurl, { type: "POST", success: "ghmp", arg: hw_arg, val: hw_value }).done (function( hw_total ) { hardware_div.innerHTML = hw_total; });但是函数 ghmp 永远不会被调用！
嗯。如何在评论中添加代码而不会出现乱码？

【解决方案2】：

最后我让它工作了（基于您的代码并掌握服务器和客户端上下文之间的差异，在哪里使用哪种语言以及可以访问哪些数据）。谢谢你的帮助。 Web 开发必须有一种可读性和上下文感知的单一语言的范围？呵呵，我想改变世界以适应我！！

【讨论】：