2012-12-31 316 views
2

现在我知道我有问题的重复问题,但我真的不知道要搜索什么,因为我是一个完整的AJAX jQuery noob。相信我,我试图寻找我认为明显的东西,但没有运气,所以请放轻松点。JQuery AJAX发布和刷新页面内容没有重新加载页面

我有一个PHP的wordpress网站,显示英镑的价格作为默认值。在顶部,是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中的会话变量似乎与用户的会话ID具有不同的session_id,因为该选项不再存储。

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

SOLUTION 我用里博的解决方案,开始与合作,并解决了最初的问题,然后用NomikOS的解决方案扩展...

+0

您在页面上需要价格货币的产品如何? – stefanz

+0

这是表格产品定价。大约有7个表格(简码小部件),每个表格大约有14个价格需要更改。装载页面时,价格目前以php计算。 – Gravy

回答

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调用,你需要做的是五星级的需要最好的。

+0

当你可以使用'$(this).val()'时,为什么使用'$('#changeCurrency选项:选中').val()'? – Popnoodles

+0

我的每个shortcode小部件都是在函数中生成的。是否有可能让jquery获得一个php脚本来调用该函数,并用PHP函数返回的html数据的内容生成html(替换整个div内容)? – Gravy

+0

肉汁:是的,如果你的php函数只能在页面url.php中输出你需要的html,而div有id =“div_id”,你可以做$(“#div_id”)load(“url.php”) –

-1

删除该平变化,并添加一个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. 

我没有检查该代码是否

+0

嗨,谢谢。我会研究这个,但是你的方法让我担心js可以被降级......如果用户没有js,或者js被关闭,我怎么仍然允许用户提交表单来改变货币方法?我知道在我上面的例子中,我有onchange =“this.form.submit()”,但这并不阻止我添加一个按钮说“提交”。 – Gravy

+0

如果没有JS,我写出来的事件将不会被捕获,并且当他们按提交时,所有事情都会按照您的预期进行。 – Popnoodles

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()向服务器发送/处理数据,但​​在更新数据库时不好,因为您无法管理返回的消息o f故障,其响应的精度为json(例如:倍数验证错误消息)。只需使用​​即可加载HTML视图。

UPDATE:

设置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中提供的安全功能是“随机数”。通常,“随机数”是一种令牌,只能使用一次,并且经常用于防止未经授权的人员代表另一个 人员提交数据。

编号: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 NoncesWPtuts+: Capabilities and Nonces

+0

@gravy看到最后更新... –

+0

嗨那里NomikOS。你能帮助我这个nonce事业?这将有助于防止例如JSON刮? – Gravy

+0

@gravy嗨,回答更新...这最后一个问题'nonces'超出了与您的问题标题有关的范围。所以人们喜欢'1Q = 1A'风格。不要犹豫,开一个新的问题。 HNY队友。 –