欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

首页

jquery ajax 自己亲自做的 有大用 有大大用

shiping1 的头像
星期一, 2013-07-29 19:00 — shiping1

http://www.w3school.com.cn/jquery/ajax_ajax.asp

 

1)一种方法  $ajax_jqueryAjax

function acceptFriend(userFriendId, friendId, my)
{
  var bool = window.confirm(IS_TRUE_ACCEPT);
  if (!bool)
      return;
  $.ajax({
            type:"POST",
            url: "./ajax/addRelati.php",
            cache: false,
            dataType: 'json', //预期服务器返回的数据类型。 通过 dataType 选项还可以指定其他不同数据处理方式。除了单纯的 XML，还可以指定 html、json、jsonp、script 或者 text。

            timeout: 20000,//设置超时时间
            data: {"groupName" : groupName, flag:'addGroup'},
            //data: "name=John&location=Boston",
            //data: $("#form").serialize(),
            
            error: function(){alert('error');},
           

//jquery下面这个信息很有用
//error: function(XMLHttpRequest, textStatus, errorThrown) {  //#3这个error函数调试时非常有用，如果解析不正确，将会弹出错//误框
                       // alert(XMLHttpRequest.status);
                       // alert(XMLHttpRequest.readyState);
                        //alert(textStatus); // paser error;
                    //},

 
            //error: function(err) {      
            //   alert(err);      
            //  }  
            //error: function(x, e)
            // {
            //                     alert(x.responseText);  
            // },
            beforeSend: function()
            {    
                $("#friend"+groupId).append('<ul class="interval" ><li ><label>wait&nbsp;<img src="img/wait.gif" /></label></li></ul>');
            },
            success: function(result)
            {
                if (result == 'acceptFailed')
                {
                   alert('accept friend failed');
                   return;
                }                             
            },
            complete: function (xhr, statusCode)
            {
               alert(123);
            }
        });
}

 

 

2)二种方法 $ajax_jqueryAjax_simple.js

 

$.ajax({
            type:"POST",
            url: "./ajax/addRelati.php",
            cache: false,  
            data: {"groupName" : groupName, flag:'addGroup'},            
            error: function(){alert('error');},
            success: function(result)
            {
                if (result == 'acceptFailed')
                {
                   alert('accept friend failed');
                   return;
                }                             
            }
           
});







//同步
$.ajax({
            type:"POST",
            url: "./ajax/addRelati.php",
            cache: false,  
             async:false,
            data: {"groupName" : groupName, flag:'addGroup'},            
            error: function(){alert('error');},
            success: function(result)
            {
                if (result == 'acceptFailed')
                {
                   alert('accept friend failed');
                   return;
                }                             
            }
           
});

 

3)三种方法 $ajax_jqueryAjax.js

 

function acceptFriend(userFriendId, friendId, my)
{
  var bool = window.confirm(IS_TRUE_ACCEPT);
  if (!bool)
      return;
  $.ajax({
            type:"POST",
            url: "./ajax/addRelati.php",
            cache: false,
            dataType: 'json',
            data: {"groupName" : groupName, flag:'addGroup'},
            //data: "name=John&location=Boston",
            //data: $("#form").serialize(),
            //data: {'complexs[]': complexs},  以数组形式进行提交
            
            error: function(){alert('error');},
            //error:function (XMLHttpRequest, textStatus, errorThrown){
            //        alert(XMLHttpRequest.status);
            //        alert("错误：" + textStatus);
            //        alert(errorThrown);
            //    }   
            //error: function(err) {      
            //   alert(err);      
            //  }  
            //error: function(x, e)
            // {
            //                     alert(x.responseText);  
            // },
            beforeSend: function()
            {    
                $("#friend"+groupId).append('<ul class="interval" ><li ><label>wait&nbsp;<img src="img/wait.gif" /></label></li></ul>');
            },
            success: function(result)
            {
                if (result == 'acceptFailed')
                {
                   alert('accept friend failed');
                   return;
                }                             
            },
            complete: function (xhr, statusCode)
            {
               alert(123);
            }
        });
}

 

4)四种方法 ajax_jqueryAjax2

function acceptFriend(userFriendId, friendId, my)
{
  var bool = window.confirm(IS_TRUE_ACCEPT);
  if (!bool)
      return;
  $.ajax({
            type:"POST",
            url: "./ajax/acceptRelati.php",
            cache: false,
            data: {"userFriendId":userFriendId, 'friendId':friendId},
            error: function() {alert(UNKNOWN_ERROR);},
            success: function(result)
            {
                if (result == 'acceptFailed')
                {
                   alert('accept friend failed');
                   return;
                }
                else (result == 'acceptSuccess')
                {
                   var $thirdFather = $(my).parent().parent().parent();
                   $(my).remove();
                   var str= $thirdFather.html();
                   str  = "<div  class='bar_no_button'>"+str+"</div>";
                   $thirdFather.remove();  
                   //remove the same friends
                   if ($('#friends').find('ul.friend').children('li:eq(0)').html() == result.friendEmail)
                   {
                                $('#friends').find('ul.friend').children('li:eq(0)').parent().parent().remove();
                   }
                   $('#acceptFriends').after(str);
                   //if no accept div no friend ,hide it
                   if ($('#contactleftarea1').find("div.bar_no_button").size()==0)
                   {
                                $('#contactleftarea1').css('display','none');
                   }
                   //if  wait accept div no friend ,hide it
                    if ($('#contactleftarea2').find("div.bar_no_button").size()==0)
                    {
                                $('#contactleftarea2').css('display','none');
                    }
                }
            }
        });
}

 

5)五种方法  ajax_jqueryAjax2.js

function acceptFriend(userFriendId, friendId, my)
{
  var bool = window.confirm(IS_TRUE_ACCEPT);
  if (!bool)
      return;
  $.ajax({
            type:"POST",
            url: "./ajax/acceptRelati.php",
            cache: false,
            data: {"userFriendId":userFriendId, 'friendId':friendId},
            error: function() {alert(UNKNOWN_ERROR);},
            success: function(result)
            {
                if (result == 'acceptFailed')
                {
                   alert('accept friend failed');
                   return;
                }
                else (result == 'acceptSuccess')
                {
                   var $thirdFather = $(my).parent().parent().parent();
                   $(my).remove();
                   var str= $thirdFather.html();
                   str  = "<div  class='bar_no_button'>"+str+"</div>";
                   $thirdFather.remove();  
                   //remove the same friends
                   if ($('#friends').find('ul.friend').children('li:eq(0)').html() == result.friendEmail)
                   {
                                $('#friends').find('ul.friend').children('li:eq(0)').parent().parent().remove();
                   }
                   $('#acceptFriends').after(str);
                   //if no accept div no friend ,hide it
                   if ($('#contactleftarea1').find("div.bar_no_button").size()==0)
                   {
                                $('#contactleftarea1').css('display','none');
                   }
                   //if  wait accept div no friend ,hide it
                    if ($('#contactleftarea2').find("div.bar_no_button").size()==0)
                    {
                                $('#contactleftarea2').css('display','none');
                    }
                }
            }
        });
}

 

6)六种方法  ajax_jqueryAjax3

$(document).ready(function(){
//formAddTask commit
    $("#addGroupForm").submit(function (){        
        var groupName = $("[name='groupName']").val();
        //remove trim
        groupName = groupName.replace(/(^\s+)|(\s+$)/g,"");
        //remove danger char
        var re = /[\'\"<>\\\/]/gi;     //remove ' " < or >  
        groupName = groupName.replace(re,"");
        //if double char
        var re = /[^\x00-\xff]/;
        if (re.test(groupName))
        {
            if (groupName.length > 6)
            {
                   $("#addGroupError").parent().css('display','');
                   $("#addGroupError").html("<font color='red'>"+GROUP_CANNOT_MORE_THAN_SIX_CH_JA+"</font>");
                   $("[name='groupName']").focus();
                   return false;
            }
        }
        if(groupName == '')
        {
            $("#addGroupError").parent().css('display','');
            $("#addGroupError").html("<font color='red'>"+GROUP_CAN_NOT_EMPTY+"</font>");
            $("[name='groupName']").focus();
            return false;
        }
        $.ajax({
            type:"POST",
            url: "./ajax/addRelati.php",
            cache: false,
            dataType: 'json',
            data: {"groupName" : groupName, flag:'addGroup'},
            error: function(){alert(UNKNOWN_ERROR);},
            success: function(result)
            {//好像 ajax 直接是 result 不是 result.response  ,,,,json类型 就是这样获取php的输出的json结果的
                if (typeof(result.response) != "undefined" || result.response=='')
                {
                   $("#addGroupError").parent().css('display','');
                   $("#addGroupError").html("<font color='red'>"+result.response+"</font>");
                   return;
                }
                else
                {
                    $("#addGroupError").parent().css('display','none');
                   $('#groups div:nth-child(2)').after("<div class='bar_no_button'><ul class='interval'><li class='rightcategory2' style='width:200px'>"+
                       "<a href='#' onclick='javascript:showGroupFriends("+result.groupId+")' class='ediGrouHref'>"+
                        result.groupName+"</a></li>"+
                      "<li class='rightcategory2'>"+
                      "<a href='#' onclick='javascript:preEditGroup("+result.groupId+",this)'>"+
                      "<img src='./img/pencil.gif' alt='"+EDIT+"' title='"+EDIT+"'/>"+"</a></li>"+
                      "<li class='rightcategory2'>"+
                      "<a href='#' onclick='javascript:deleteGroup("+result.groupId+",this)'>"+
                      "<img src='./img/i_noentry.png' alt='"+DELETE+"' title='"+DELETE+"'/>"+"</a>"+
                      "</li></ul></div>");
                    $(".groupName :first-child").after("<option value='"+result.groupId+"' >"+result.groupName+"</option>");
                    $("[name='email']").val('');
                    $("[name='groupName']").val('');
                }
            }
        });
      return false;
    });
    
});

7)七种方法 ajax_jqueryAjax3.js

 

$(document).ready(function(){
//formAddTask commit
    $("#addGroupForm").submit(function (){        
        var groupName = $("[name='groupName']").val();
        //remove trim
        groupName = groupName.replace(/(^\s+)|(\s+$)/g,"");
        //remove danger char
        var re = /[\'\"<>\\\/]/gi;     //remove ' " < or >  
        groupName = groupName.replace(re,"");
        //if double char
        var re = /[^\x00-\xff]/;
        if (re.test(groupName))
        {
            if (groupName.length > 6)
            {
                   $("#addGroupError").parent().css('display','');
                   $("#addGroupError").html("<font color='red'>"+GROUP_CANNOT_MORE_THAN_SIX_CH_JA+"</font>");
                   $("[name='groupName']").focus();
                   return false;
            }
        }
        if(groupName == '')
        {
            $("#addGroupError").parent().css('display','');
            $("#addGroupError").html("<font color='red'>"+GROUP_CAN_NOT_EMPTY+"</font>");
            $("[name='groupName']").focus();
            return false;
        }
        $.ajax({
            type:"POST",
            url: "./ajax/addRelati.php",
            cache: false,
            dataType: 'json',
            data: {"groupName" : groupName, flag:'addGroup'},
            error: function(){alert(UNKNOWN_ERROR);},
            success: function(result)
            {//好像 ajax 直接是 result 不是 result.response
             //这个response是个json的键值　
                if (typeof(result.response) != "undefined" || result.response=='')
                {
                   $("#addGroupError").parent().css('display','');
                   $("#addGroupError").html("<font color='red'>"+result.response+"</font>");
                   return;
                }
                else
                {
                    $("#addGroupError").parent().css('display','none');
                   $('#groups div:nth-child(2)').after("<div class='bar_no_button'><ul class='interval'><li class='rightcategory2' style='width:200px'>"+
                       "<a href='#' onclick='javascript:showGroupFriends("+result.groupId+")' class='ediGrouHref'>"+
                        result.groupName+"</a></li>"+
                      "<li class='rightcategory2'>"+
                      "<a href='#' onclick='javascript:preEditGroup("+result.groupId+",this)'>"+
                      "<img src='./img/pencil.gif' alt='"+EDIT+"' title='"+EDIT+"'/>"+"</a></li>"+
                      "<li class='rightcategory2'>"+
                      "<a href='#' onclick='javascript:deleteGroup("+result.groupId+",this)'>"+
                      "<img src='./img/i_noentry.png' alt='"+DELETE+"' title='"+DELETE+"'/>"+"</a>"+
                      "</li></ul></div>");
                    $(".groupName :first-child").after("<option value='"+result.groupId+"' >"+result.groupName+"</option>");
                    $("[name='email']").val('');
                    $("[name='groupName']").val('');
                }
            }
        });
      return false;
    });
    
});

 

8)八种方法 ajax_async



$(document).ready(function(){
  $("#b01").click(function(){
  htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});  //false 表示是 不是异步 即同步
  $("#myDiv").html(htmlobj.responseText);
  });
});

async
类型：Boolean
默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。





$.ajax({
            type:"POST",
            url: "./ajax/addRelati.php",
            cache: false,
            async:false,
            data: {"groupName" : groupName, flag:'addGroup'},            
            error: function(){alert('error');},
            success: function(result)
            {
                if (result == 'acceptFailed')
                {
                   alert('accept friend failed');
                   return;
                }                             
            }
           
        });

 

9)九种方法 arraySubmit



function acceptFriend(userFriendId, friendId, my)
{
  var bool = window.confirm(IS_TRUE_ACCEPT);
  if (!bool)
      return;
  $.ajax({
            type:"POST",
            url: "./ajax/addRelati.php",
            cache: false,
            dataType: 'json',
            data: {"groupName" : groupName, flag:'addGroup'},
            //data: {'complexs[]': complexs},  以数组形式进行提交
             
            
            success: function(result)
            {
                if (result == 'acceptFailed')
                {
                   alert('accept friend failed');
                   return;
                }                             
            }
            complete: function (xhr, statusCode)
            {
               alert(123);
            }
        });
}





jQuery.ajax({
        cache: false,
        url: Drupal.settings.basePath + '?q=shipingzhongmymodule/test/pager/callback',
        data: {page: page, sort: sort, order: order},
        dataType: 'text',
        error: function(request, status, error) {
            alert(status);
        },
        success: function(data, status, request) {
            var html = data;

            jQuery('#table-container').html(html);
            
            jQuery('#table-container th a').
                add('#table-container .pager-item a')
                .add('#table-container .pager-first a')
                .add('#table-container .pager-previous a')
                .add('#table-container .pager-next a')
                .add('#table-container .pager-last a')
                    .click(function(el, a, b, c) {
                        var url = jQuery.url(el.currentTarget.getAttribute('href'));
                        refreshTable(url.param('page'), url.param('sort'), url.param('order'));
                    
                        return (false);
                    });
        }
    });




ajax操作后 进行 跳转页面  location.href
$.ajax({

    type:"POST",
    url: //你的请求程序页面随便啦
    async:false,//同步：意思是当有返回值以后才会进行后面的js程序。
    data://请求需要发送的处理数据
    success:function(msg){
        if (msg) {//根据返回值进行跳转
            window.location.href = '你的跳转的目标地址';
        }
    }
以上回答你满意么？

来自 http://zhidao.baidu.com/link?url=ftnTT5dLMz37GeSIIeZdtMySP2G-ULrWT71g_mJTvViSodoVr6j2dR6LaVAnaFwgm1yuq30Du2fYTJRhRV5JBhwp0os1H4XJSSwXbua_DRK


up vote156down voteaccepted
 

正确答案
You can select the form like this:

$("#submit").click(function(){
    var form = $(this).parents('form:first');
    ...
});

However, it is generally better to attach the event to the submit event of the form itself, as it will trigger even when submitting by pressing the enter key from one of the fields:

$('form#myform1').submit(function(e){
     e.preventDefault(); //Prevent the normal submission action
     var form = this;
     // ... Handle form submission
});

To select fields inside the form, use the form context. For example:

$("input[name='somename']",form).val();


普通分类: 
jquery
Powered by Drupal

友情链接

校园好文网

 www.shipingzhong.cn  个人技术网_前端_后台    备案号:苏ICP备18010659号-2