zoukankan      html  css  js  c++  java
  • jquery的ajax实现方式

    在JQuery中,AJAX有三种实现方式:$.ajax() , $.post , $.get()。 
    首先我们看$.get(): 

    .代码如下:

    $.get("test.jsp", 
    { name: "cssrain", time: "2008/01/21" }, //要传递的数据 
    function(data){ 
    alert("返回的数据: " + data); 


    然后看$.post(): 
    跟$.get()格式一样. 

    .代码如下:

    $.post("test.jsp", 
    { name: "cssrain", time: "2008/01/21" }, //要传递的数据 
    function(data){ 
    alert("返回的数据: " + data); 


    上面2种方式的区别应该就是 请求方式不同(一个get 一个post). 
    最后我们看$.ajax(): 

    .代码如下:

    $.ajax({ 
    url:'Accept.jsp', 
    type:'post', //数据发送方式 
    dataType:'html', //接受数据格式 (这里有很多,常用的有html,xml,js,json) 
    data:'text='+$("#name").val()+'&date='+new Date(), //要传递的数据 
    error: function(){ //失败 
    alert('Error loading document'); 
    }, 
    success: function(msg){ //成功 
    alert( "Data Saved: " + msg ); 

    }); 


    实例 
    前台jsp部分的代码如下:... 
    票数: 

    .代码如下:

    <span id="i<%=id%>"><%=vote_number%></span><br/> 
    <a onclick=myvote(<%=id%>); href='javascript:;'">投票</a> 


    ... 
    js部分的代码如下 

    .代码如下:

    function myvote(id){ 
    $.post("vote.jsp", { id: id }, 
    function(data){ 
    eval("var data="+data); 
    if (data.issucc=="0"){ 
    alert(data.mess) 
    }else{ 
    //alert("更新页面"); 
    $("#i"+data.myid).html(data.votenum); 

    }); 


    返回数据为json 
    后台返回的json数据如下 
    {issucc:,mess:”“,votenum:,myid:} 
    issucc:是否成功 
    mess:信息,主要是错误信息,比如没登录,超过限制等 
    votenum:投票后的得票总数 
    myid:投票的id,用于更新页面的投票数 
    一个注册登录实例 
    js 
    login.jsp返回的类型为text形式,正确时是“OK”,错误时是 
    “error”。 

    .代码如下:

    var userName; 
    var password; 
    var result; 
    $(document).ready(function(){ 
    $("#load").hide(); 
    $("#success").hide(); 
    $("#error").hide(); 
    }); 
    $(document).ready(function(){ 
    $("#button").click(function(){ 
    $("#error").hide(); 
    $("#load").show("slow"); 
    userName = $("#userName").val(); 
    password = $("#password").val(); 
    $.ajax({type: "post", 
    url: "login.jsp", 
    dataType: "html", 
    data: "userName="+userName+"&password="+password, 
    success: function(result){ 
    var res = String($.trim(result)); 
    if(res=="OK"){ 
    $("#myTable").hide("slow"); 
    $("#success").show("slow"); 
    }else if(res=="error"){ 
    $("#error").show("slow"); 
    $("#load").hide("slow"); 
    }else{ 
    alert("返回异常");} 

    }); 
    }); 
    }); 


    jsp页面 
    第一种responseText格式 

    .代码如下:

    <%@ page language="java" pageEncoding="gb2312"%> 
    <% 
    String userName = request.getParameter("userName"); 
    String password = request.getParameter("password"); 
    if(password.equals("longleg")&&userName.equals("thy")){ 
    out.print("OK"); 
    }else{out.print("error");} 
    %> 
  • 相关阅读:
    openwrt的内核版本是在哪个文件中指定的?
    git如何将一个分支合并到另一个分支?
    cygwin如何下编译安装tmux?
    如何合并ts文件?
    在cygwin下创建的文件位于windows的哪个目录下?
    linux shell的for循环语法是怎样的?
    内部类访问局部变量时,为什么需要加final关键字
    Java8函数式编程的宏观总结
    Maven私服使用经验总结
    java关于Integer设置-128到127的静态缓存
  • 原文地址:https://www.cnblogs.com/fengli9998/p/7352608.html
Copyright © 2011-2022 走看看