java - jQuery 和 ajax

Question

我有一个包含 10 行的 HTML 表格，其中有一个“当前值”列和一个“价格”列。

问:第一行是 1000 美元，第五行是 10000 美元。

如果用户将价格列更改为英镑，我如何通过 jQuery 进行 ajax 调用并更新当前值。

这里最好的方法是什么？

Answer 1

所以您需要采取的步骤(假设现在使用 PHP)....

将处理程序绑定(bind)到您的货币选择器。 (假设现在选择多种货币)。在此处理程序中包含 jQuery ajax 调用。将变量设置为等于所选货币。

 window.onload=function(){
     $('#select_id').change(function(){
         var currency = $(this).val();
         $.ajax({
            type: "POST",
            dataType: "json",
            url: "/ajaxpage.php",
            data: {
               currency:currency
            }
            success: function(data){
               $.each($('#table tr ',function(index,value){
                   $(this).find('.price_col').html(data[index]);   
               });
            },
            failure: function(){
               alert('failed');
            }            
         });              
     });    
 }

这里我们对 ajaxpage.php 进行了 ajax 调用，其中包含发布数据、货币。假设我们将返回一个包含新货币值的 json 编码字符串。在成功处理程序中，我们迭代表行，并使用其各自的值更新相应的表单元格。这可能有点倒退，因此请确保数据集匹配。

在服务器端，我们所要做的就是返回一个 json_encoded 数组，如下所示

 array(

       [0] => '1234'
       [1] => '5555'
       // and so on
 )

计算出新价格后(如果您还需要发送所有旧价格，请告诉我，我只是假设您已经知道，因为他们一开始就到达那里，但情况可能与您描述的不完全一样) )，要完成神奇的ajax，您所要做的就是......

 echo json_encode($array);

我刚刚看到你正在使用Java....你可以使用

 org.json.JSONObject

和

response.getWriter().print(jsonObject.toString());

对于最后一部分，并根据需要更改 ajax 请求中的文件名。

编辑:根据您的评论，我建议为每个选择提供一个唯一的 ID，并让所有选择共享一个类。这样我们就不必在这个例子中拆分字符串，让我们说“1”，“2”等。并且您的行具有 id row_1，row_2 等。在这种情况下，它看起来像...... .

window.onload=function(){
     $('#.selector').change(function(){
         var row_id = $(this).attr('id');
         $.ajax({
            type: "POST",
            dataType: "json",
            url: "/ajaxpage.php",
            data: {
               id:row_id
            }
            success: function(data){
                $('#row_'+data.id).find('.price_col').html(data.cval);
            },
            failure: function(){
               alert('failed');
            }            
         });              
     });    
 }

在这种情况下要返回的 JSON 对象应该是具有 id 和 cval 属性的单个对象。如果遇到问题，请进行调试，

  console.log(data);

在成功处理程序的第一行中，并在 XHR 请求下检查 chrome/firefox 中的开发工具。这将为您提供有关请求和您返回的数据的更多信息。