jQuery AJAX發布和刷新頁面內容，無需重新加載頁面

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>

在主頁上，有幾個我稱為“短代碼小部件”的小部件 ，每個小部件都包含產品和價格表。 儀表板，如果您喜歡。

當前工作方式（低效）：

1. 用戶更改選擇。
2. 表格已提交
3. 重新加載首頁，並以選定的貨幣顯示更新的價格。

這不好，因為每當有人更改貨幣時，整個頁面都將重新加載（這需要時間，在不進行緩存的情況下傳輸大約1mb的內存，更不用說服務器上的不必要負載了）。

我想要的（效率更高）：

1. 當選擇框更改時，我希望異步發布更改貨幣會話變量的表格。
2. 每個“簡碼小部件”都被一個一個地更新，而不必重新加載整個頁面。

jQuery可以做到這一點嗎？ 我從哪里開始？

以防萬一它有所不同，以便您可以理解我的意思，這里是URL，以便您可以了解我在說什么... http://bit.ly/10ChZys

第2部分：由於使用了以下答案，我使用jQuery和Ajax更新了FixTable ...我使用會話變量來存儲用戶的選擇，這樣，如果他們返回站點，則該選項將被保存。

我的代碼有問題，因為存儲在http://goldealers.co.uk/wp-content/plugins/gd/tables.php?currency=GBP&table=fixTable中的會話變量似乎與用戶會話具有不同的session_id id，因為該選項不再存儲。

有沒有辦法告訴服務器它們是同一會話？

解決方案我從Ribot的解決方案開始就解決了最初的問題，然后擴展了NomikOS的解決方案...

Answer 1

是的，jQuery可以使用ajax做到這一點。

首先，在使用ajax時，您無需發布表單即可獲取數據。 jQuery中的Ajax將加載網址的文本數據。

您可以先給您的選擇一個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：

關於基於隨機數的安全性：

WordPress中可用的安全功能是“ 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":["£", 1], "USD":["$", 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.

我沒有檢查任何代碼