Question

现在我知道我在这里要求重复的问题，但是我真的不知道要搜索什么，因为我是一个完整的AJAX jQuery noob。相信我，我一直试着寻找我认为显而易见的东西，没有运气，所以请放轻松我。

我有一个php wordpress网站，默认显示GBP的价格。在顶部，是一个带onchange="this.form.submit()"的选择框，允许用户更改所有价格所引用的默认货币。

<form method="post" action="">
    <select name="ChangeCurrency" onChange="this.form.submit()">
        <option value="GBP">GBP</option>
        <option value="USD">USD</option>
        <option value="EUR">EUR</option>
    </select>
</form>

在主页上，有几个，我称之为“短代码小部件”，每个都包含产品和价格表。如果你愿意，可以使用仪表板。

目前的工作原理（效率低下）：

用户更改选择。
提交表格
主页以所选币种重新加载了更新后的价格。

这不好，因为每当有人更改货币时，整个页面都会被重新加载（这需要时间，在没有缓存的情况下传输大约1mb，更不用说服务器上不必要的负载了。）

我想要什么（更有效率）：

当更改选择框时，我希望异步发布更改货币会话变量的表单。
每个“短代码小部件”都是逐个更新的，无需重新加载整个页面。

这是jquery能做的吗？我从哪里开始？

万一它会有所不同，以便您可以看到我的意思，这里是URL，以便您可以看到我在说什么...... http://bit.ly/10ChZys

第2部分： 我已经使用jQuery和ajax来更新fixTable，这要归功于以下答案的混搭......我使用会话变量来存储用户选择，这样，如果他们返回到站点，该选项将被保存。

我的代码出现问题，因为http://goldealers.co.uk/wp-content/plugins/gd/tables.php?currency=GBP&table=fixTable中存储的会话变量似乎与用户的会话ID具有不同的session_id，因为该选项不再存储。

有没有办法告诉服务器他们是同一个会话？

解我使用Ribot的解决方案开始工作并解决了最初的问题，然后扩展了NomikOS的解决方案......

Answer 1

是的，jQuery可以使用ajax。

首先，使用ajax时，您不必发布表单来获取数据。 jQuery中的Ajax将加载url的文本数据。

您可以先选择一个id（此处为id =“changeCurrency”）和：

$("#changeCurrency").change(function(){
    currency = $('#changeCurrency option:selected').val() // get the selected option's value
    $("#some_div").load("someurl.php?currency=" + currency);
});

现在阅读jQuery和ajax，了解您需要做什么样的ajax调用，以满足您的需求。

Answer 2

注意：这个答案显示了关于AJAX进程的php后端的一些想法。它是讨论前端过程的其他答案的补充。

1.-在WP中管理AJAX请求的模型，只是一些想法，好吗？

add_action('init', 'process_ajax_callback');

function process_ajax_callback()
{
    if ( ! $_REQUEST['go_ajax'])
    {
        return;
    }

    try
    {
        if (isset($_REQUEST['nonce_my_ajax']))
        {
            $nonce   = $_REQUEST['nonce_my_ajax'];
            if ( ! wp_verify_nonce($nonce    = $_REQUEST['nonce_my_ajax'], 'nonce_my_ajax'))
            {
                throw new Exception("Nonce token invalid."); // security
            }
        }
    }
    catch (Exception $e)
    {
        $output['result']    = false;
        $output['message']   = $e->getMessage();

        echo json_encode($output);
        exit;
    }

    $result  = true;
    $message = '';

    switch ($_REQUEST['action'])
    {
        case 'update_price':
        try
        {
            // update price
            // price value comes in $_REQUEST['price']
        }
        catch (Exception $e)
        {
            $result              = false;
            $message             = $e->getMessage();
        }
        break;      

        case 'other_actions':
        break;      
    }

    $output['result']    = $result ? true : false;
    $output['message']   = $message;

    echo json_encode($output);
    exit;
}

2.-不要忘记安全

// nonce_my_ajax is passed to javascript like this:
wp_localize_script('my_js_admin', 'myJsVars', array(
    'nonce_my_ajax'  => wp_create_nonce('nonce_my_ajax')
));

3.-一般来说，前端所需的（与上面显示的后端模型一起使用）类似于：

$("select[name='ChangeCurrency']").live("change", function() {
    var price = $(this).val();
    $.post(
            window.location.href,
            {
                go_ajax : 1, // parse ajax
                action : 'update_price', // what to do
                price : price, // vars to use in backend
                nonce_my_ajax : myJsVars.nonce_my_ajax // security
            },
            function(output) {
            if ( output.result == true )
                // update widgets or whatever
                // $("#my_div").html("we happy, yabadabadoo!");
                // or do nothing (AJAX action was successful)
            else
                alert(output.message)
            }, 'json');
});

4.-您可以使用$.get()或$.post()将数据发送/处理到服务器中，但更新数据库时.load()不好，因为您无法管理返回的消息具有json响应精度的失败（例如：多次验证错误消息）。只需使用.load()加载HTML视图。

<强>更新

设置session_id()可以在正常请求和ajax请求中执行，并尽可能在早期阶段执行。我希望你使用一个类来包装你的插件，如果不是现在正是这样做的时候......例如：

class my_plugin {

    function __construct()
    {
        if ( ! session_id())
        {
            session_start();
        }

        add_action('init', array($this, 'process_ajax_callback'));

        // ...
    }   

    function process_ajax_callback()
    {
        // ...
    }
}

更新2：

关于基于nonce的安全性：

WordPress中提供的安全功能是“nonce”。一般来说，a   “nonce”是一种只能使用一次并且经常习惯的令牌   防止未经授权的人代表他人提交数据   人。

参考：http://myatus.com/p/wordpress-caching-and-nonce-lifespan/

在此模型中nonce_my_ajax只是一个示例，实际上它应该更加独特，例如nonce_{my_plugin_name}，或者更好nonce_{my_plugin_name}_{what_action} what_action代表updating user，或inserting new book等......

有关它的更多信息：WP Codex: WordPress Nonces，WPtuts+: Capabilities and Nonces。

Answer 3

删除onchange并添加ID

<select name="ChangeCurrency" id="ChangeCurrency">...

在页面上为您的所有价格提供基础货币的价格并输出它们

<span class="price" data-base="0.12">&pound;0.12</span>

在你的JS中有一个转换表

// base currency is GBP
// each currency has 0: currency symbol, 1: conversion rate
var currency={"GBP":["&pound;", 1], "USD":["&dollar;", 0.67]};
var usercurrency=currency['GBP'];

并将事件绑定到更改

$('#ChangeCurrency').on('change', function(){
    // post to the server to update it
    $.post(...);
    // set locally on the page
    usercurrency=currency[$(this).val()];
    // and change all the values
    $('.price').each(function(){
        $(this).html(usercurrency[0] + (usercurrency[1] * $(this).data('base')).toFixed(2) );
    });
}).trigger('change'); // trigger this to run on page load if you want.

我没有检查过任何此代码

JQuery AJAX发布和刷新页面内容，无需重新加载页面

3 个答案: