您好,登錄后才能下訂單哦!
目的: 表單提交,針對某個字段做唯一性校驗
前臺做法:就是在點擊提交按鈕的時候,對字段做校驗,其中涉及到 identity唯一性校驗的時候,通過調用方法checkIdentifyIsChongFu異步請求后臺,此時應該注意必須使用 必須使用 $.ajax({ 請求后臺,因為只有此方法可以將設置 JS請求方式為同步,即只有在checkIdentifyIsChongFu方法中獲取的flag只有在執行完 $.ajax({里面的后臺請求和里面的賦值邏輯后才返回,否則的話比如不用$.ajax({ 還是用 $.post(方式,那么 checkIdentifyIsChongFu方法會先將flag的默認值返回給addCataFun(),讓addCataFun()處理,然后checkIdentifyIsChongFu再調用自己的post方式走到后臺做自己post里面的function賦值,然后再將flag返回addCataFun()。
// 同級下保存按鈕對應的JS函數
function addCataFun() {
// 1 通過post方式提交表單
var name = $("#name").val();
var orderNo = $("#orderNo").val();
var keyWord = $("#keyWord").val();
var identify = $("#identify").val();
var pid = $("#pid").val();
var level = $("#level").val();
var catalogIdNew = $("#catalogIdNew").val();
var catalogId = $("#catalogId").val();
//var endValue = $("radio:checked").val();
var endValue = $("input:checked").val();
var addType = $("#addType").val();
name = name.replace(/^\s+|\s+$/g,"");
identify = identify.replace(/^\s+|\s+$/g,"");
orderNo = orderNo.replace(/^\s+|\s+$/g,"");
if(name == "") {
alert("類目名稱不能為空");
}else if(identify == ""){
alert("內部名不能為空");
}else if(checkIdentifyIsChongFu(identify)) {
alert("內部名重復,請換一個");
}else if(orderNo == "") {
alert("順序號不能為空");
}else if(!checkNum(orderNo)){
alert("順序號必須為正整數");
}else{
$.post('<c:url value="/catalog!addorUpdateCata"/>', {name:name,orderNo:orderNo,keyWord:keyWord,identify:identify,pid:pid,level:level,catalogIdNew:catalogIdNew,endValue:endValue,addType:addType,catalogId:catalogId},
function(data){
$('#first').html(data);// 更新 添加類目的div數據
//alert($("#catalogIdNew").val()) ;
if($("#catalogIdNew").val()) {
document.getElementById('catalogparagEidtID').style.display = "";// 段落內容編輯按鈕顯示出來
//document.getElementById('catalogparagEidtID').enabled = "true"; // 段落內容編輯按鈕為可點擊狀態
}
},
'html');
}
}
// 驗證 添加類目的內部名稱是否重復
function checkIdentifyIsChongFu(identify){
var flag;
$.ajax({
url : '<c:url value="/catalog!checkIdentify"/>',
type : 'post',
async: false,//使用同步的方式,true為異步方式
data : {identify:identify},//這里使用json對象
dataType : 'json',
success : function(data){
//code here...
var obj = eval(data);
if(obj.status == "1"){
flag = false;
}else{
flag = true;
}
},
});
return flag;
}
A2: 后臺的操作代碼:
// 根據字符串輸出JSON,返回null
public String ajaxJson(String jsonString) {
return ajax(jsonString, "text/html");
}
// AJAX輸出,返回null
public String ajax(String content, String type) {
try {
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType(type + ";charset=UTF-8");
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
response.getWriter().write(content);
response.getWriter().flush();
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
/**
* 獲取某類目下所有段落數據后在DIV中展示
*/
public String cataParagPreview() {
Map map = new HashMap();
List list = new ArrayList();
logger.info("到達CatalogController::cataParagPreview()方法的類目主鍵為: " + catalogIdNew);
if(validateNotEmpStr(catalogIdNew)) {
// 獲取類目下所有段落
CatalogParagClient client = new CatalogParagClient();
CatalogParagSelector selector = new CatalogParagSelector(1,100,Constants.SORT_TYPE_ASC,Constants.SORT_BY_ORDERNO,catalogIdNew,null,null);
selector.setSelectType(Constants.SL_LIST);
CatalogParagResponse resp = client.get(selector);
int status = resp.getStatus();
if(status == Constants.SUCCESS) {
//this.parag.getTilte()
parags = resp.getParags();
if(parags != null && parags.size() > 0) {
for(int i=0; i< parags.size(); i++) {
list.add(new ParagWeb(i+1,parags.get(i).getTilte(),parags.get(i).getContent()));
}
}
}
map.put("parags", list);
}
JSONObject jsonObject = (JSONObject) JSONSerializer.toJSON(map);
return ajaxJson(jsonObject.toString());
}
其實還有另一種做法:
前臺JS:
var url = '<c:url value="/attribute!checkExistAttribute" />';
$.post(url, data, function(status){ 他后臺就沒有用json,而是將return "_callback/ajax4checkExistStatus";然后再這個頁面中通過 ${statusCode}接受
if ($.trim(status) == 200) { 這樣的話 返回的數值就是 ${statusCode}了。即 function(status)的status = ${statusCode};了。
pageAction(code);
} else if ($.trim(status) == 401) {
alert('名稱已存在!');
} else if ($.trim(status) == 402) {
alert('別名標識已存在!');
} else if ($.trim(status) == 403) {
alert('名稱和別名標識已存在!');
}
});
后臺代碼:
/**
* 判斷屬性是否已存在
* @return
*/
public String checkExistAttribute() {
AttributeClient client = new AttributeClient();
AttributeSelector selector = new AttributeSelector(catalogId, Constants.ASSIST_QUERY_EXSIT, new AssistParam(attr.getLabel(), attr.getAlias(), null));
AttributeResponse response = client.getAssistInfo(selector);
this.statusCode = response.getStatus();
return "_callback/ajax4checkExistStatus";
}
而返回的頁面中 只有 ${statusCode} 這行代碼,即后臺僅僅返回一個statusCode數據,返回到頁面也只有這個數據,然后再前臺中 $.post(url, data, function(status){ 其中 function(status)中的status就是返回的數據,也就是statusCode。 貌似這個方式更巧妙。。。。
B ; isNaN() 函數用于檢查其參數是否是非數字值。
比如
<script type="text/javascript">
document.write(isNaN(0)+ "<br />") true
document.write(isNaN("Hello")+ "<br />") false
</script>
C: query將字符串去掉前后空格 有自帶的方法,
function testTrim(){
alert($.trim(' sdfs ').length);
}
以前一直用 identify = identify.replace(/^\s+|\s+$/g,"");去做的
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。