用單個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調用填充多個元素

回答

相關問題