2

ここで重複した質問をするリスクがあることはわかっていますが、私は完全なAJAX jQuery初心者であるため、何を検索すればよいかわかりません。私を信じて、私は運が悪かったので、私が明白だと思うものを検索しようとしましたので、私に気楽に行ってください。

デフォルトでGBPで価格を表示するphpワードプレスサイトがあります。上部には、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. 各「ショートコードウィジェット」は、ページ全体をリロードすることなく、1つずつ更新されます。

これは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。

それらが1つの同じセッションであることをサーバーに伝える方法はありますか？

ソリューション 私はRibotのソリューションを使用して最初に機能し、最初の問題を解決し、次にNomikOSのソリューションで拡張しました...

4

3 に答える 3

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呼び出しを実行する必要があります。

于 2012-12-31T00:25:56.210 に答える
1

注：この回答は、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()DBを更新する場合は、応答の精度で失敗のメッセージを返すことを管理できないため、適切ではありません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」は1回だけ使用できるトークンであり、許可されていない人が他の人に代わってデータを送信するのを防ぐためによく使用されます。

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

このモックアップnonce_my_ajaxは単なる例であり、実際には、、、などを表す場合は、のようnonce_{my_plugin_name}に、またはさらに優れている必要があります。nonce_{my_plugin_name}_{what_action}what_actionupdating userinserting new book

詳細情報：WPコーデックス：WordPressノンス、WPtuts +：機能とノンス。

于 2012-12-31T00:38:52.187 に答える
-1

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.

私はこのコードのどれもチェックしていません

于 2012-12-31T00:20:49.347 に答える