用单个jQuery Ajax调用填充多个元素

我有这种表单验证通过ajax提交的字段（使用Codeigniter的Form_Validation类）。用单个jQuery Ajax调用填充多个元素

<input type="text" name="field1" id="field1"> /> 
<span id="field1_error"></span> 
.... 
<input type="text" name="field2" id="field2"> /> 
<span id="field2_error"></span> 
... 
<input type="text" name="field3" id="field3"> /> 
<span id="field3_error"></span> 
<input type="submit" name="submit" id="btnPublish" />

提交时，jQuery调用CI的验证方法。使用单个Ajax调用来输出这些验证错误的最佳方法是？

来源

2010-11-20 Panagiotis Panagi

这里有什么用AJAX的好处？如果我正确地做到了这一点，那么您将使用整个表单的服务器端验证。它与实际提交页面和显示服务器生成的验证输出以及表单有什么不同？ – Krab 2010-11-20 11:41:17

原因是我基于选择的下拉菜单显示其他字段。如果我正常提交页面，那些字段将丢失。我相信要解决这个问题比上面要困难得多。 – 2010-11-20 11:54:08

也许这种方法可以帮助你..它更像是一个暗示比完整的解决方案...

在服务器端，你会做验证，并返回JSON（例如） - $进步是真/假 - 根据验证结果和$错误是阵列（名称，translated_error /或 “”）

局部PHP：

$res = array(
    'progress' => $progress, 
    'errors' => $errors 
); 
$jsonReturn = json_encode($res); 

//output result 
header('Content-Type: text/html; charset=utf-8');  
echo $jsonReturn;

部分的jQuery：

var errorFields = $([]).add(field1_error).add(field2_error).add(field3_error), 
    mainFields = $([]).add(field1).add(field2).add(field3); 

$('#btnPublish').button().click(function(event){ 

    mainFields.removeClass('ui-state-error'); 
    errorFields.val();             

    $.ajax({ 
    type: 'POST', 
    url: your_url, 
    data: $('#your_form_id').serialize(), 
     async: false, 
     success: function (returned_value){ 
      var obj = $.parseJSON(returned_value); 

      if (obj.progress==true){ 
       alert('Validation successfull'); 

      }else{ 
       $.each(obj.errors, function(index, value) { 
        if (value!=""){ //it will skip those fields with no errors 
         $('#'+index).addClass(('ui-state-error')); 
         $('#'+index+'_error').val(value); 
        } 
       }); 

      }//end return ajax 

     }//end ajax 
    });   

});

来源

2010-11-20 13:00:29 trix

谢谢你。它很棒！事实上，JSON解决了很多问题，但是我担心安全问题。因为JS代码对最终用户是可用的，所以如何确保它不能被用来做其他事情（自动请求，请求大数据集）？ – 2010-12-04 07:16:04

当您使用公开可用的任何内容时，总会有一些担忧。 Ajax（JavaScript）并不是这个规则的例外，但是你必须问自己：我是否正确地使用它，并且为了更好的用户体验而给予我的用户很大的自由度。当然，如何避免你的一些担忧，互联网充满了很好的例子。我知道这是对你的问题的一种通用的答案，但这只是事实。安全在你手中（代码）。缺乏它也是。 – trix 2010-12-04 13:41:29

用单个jQuery Ajax调用填充多个元素

回答

相关问题