zoukankan      html  css  js  c++  java
  • jQuery Ajax使用实例

    Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的差异了。

    $.post、$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()
    一、$.ajax的一般格式

    1
    2
    3
    4
    5
    6
    7
    $.ajax({
       type: 'POST',
       url: url ,
      data: data ,
      success: success ,
      dataType: dataType
    })

    二、$.ajax的参数描述

    参数 描述
    url     必需。规定把请求发送到哪个 URL。
    data 可选。映射或字符串值。规定连同请求发送到服务器的数据。
    success(data, textStatus, jqXHR) 可选。请求成功时执行的回调函数。
    dataType 可选。规定预期的服务器响应的数据类型。
    默认执行智能判断(xml、json、script 或 html)。
    三、$.ajax需要注意的一些地方:

    1.data主要方式有三种,html拼接的,json数组,form表单经serialize()序列化的;通过dataType指定,不指定智能判断。

    2.$.ajax只提交form以文本方式,如果异步提交包含<file>上传是传过不过去,需要使用jquery.form.js的$.ajaxSubmit

    四、$.ajax我的实际应用例子

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    //1.$.ajax带json数据的异步请求
    var aj = $.ajax( { 
      url:'productManager_reverseUpdate',// 跳转到 action 
      data:{ 
           selRollBack : selRollBack, 
           selOperatorsCode : selOperatorsCode, 
           PROVINCECODE : PROVINCECODE, 
           pass2 : pass2 
      }, 
      type:'post'
      cache:false
      dataType:'json'
      success:function(data) { 
        if(data.msg =="true" ){ 
          // view("修改成功!"); 
          alert("修改成功!"); 
          window.location.reload(); 
        }else
          view(data.msg); 
        
       }, 
       error : function() { 
         // view("异常!"); 
         alert("异常!"); 
       
    });
      
      
    //2.$.ajax序列化表格内容为字符串的异步请求
    function noTips(){ 
      var formParam = $("#form1").serialize();//序列化表格内容为字符串 
      $.ajax({ 
        type:'post',   
        url:'Notice_noTipsNotice'
        data:formParam, 
        cache:false
        dataType:'json'
        success:function(data){ 
        
      }); 
      
      
    //3.$.ajax拼接url的异步请求
    var yz=$.ajax({ 
       type:'post'
       url:'validatePwd2_checkPwd2?password2='+password2, 
       data:{}, 
       cache:false
       dataType:'json'
       success:function(data){ 
         if( data.msg =="false" ) //服务器返回false,就将validatePassword2的值改为pwd2Error,这是异步,需要考虑返回时间 
         
            textPassword2.html("<font color='red'>业务密码不正确!</font>"); 
            $("#validatePassword2").val("pwd2Error"); 
            checkPassword2 = false
            return
          
       }, 
       error:function(){} 
    }); 
      
      
    //4.$.ajax拼接data的异步请求
    $.ajax({  
      url:'<%=request.getContextPath()%>/kc/kc_checkMerNameUnique.action',  
      type:'post',  
      data:'merName='+values,  
      async : false, //默认为true 异步  
      error:function(){  
        alert('error');  
      },  
      success:function(data){  
        $("#"+divs).html(data);  
      }
    });
     
     
     
    转自https://www.jb51.net/article/64185.htm
     
  • 相关阅读:
    如何在一个控件上同时实现单触和多触事件
    看看iOS 5.0 beta 6都有哪些变化吧
    转,net实现下载
    转检测到潜在危险
    如何分析已有项目如何能够得到最快最大的提升???
    转Unity 入门
    近段总结
    转,net几个热点问题
    dll动态链接库
    转使用NUnit在.Net编程中进行单元测试
  • 原文地址:https://www.cnblogs.com/hugeboke/p/9982756.html
Copyright © 2011-2022 走看看