基于ajax及jQurey实现局部刷新过程解析

1、jQurey使用时需导入jquery-1.4.2.js在web文件夹下

并在写script时需像如下定义script标签：

<script src="js/jquery-1.4.2.js" type="text/javascript"></script>

2、jQurey的语法：通过$(要选取的元素)

定义响应ajax的Servlet

String buttonName=request.getParameter("buttonName");
    JSONObject jsObject =null;    //定义一个要返回的的数据
    if (buttonName.equals("button_1")){
      jsObject=new JSONObject("{first:\"傻子\",second:\"傻子\",third:\"傻子\"}"); //以键值对方式存储

    }
    if (buttonName.equals("button_2")){
      jsObject=new JSONObject("{first:\"傻女\",second:\"傻女\",third:\"傻女\"}");

    }
    if (buttonName.equals("button_3")){
      jsObject=new JSONObject("{first:\"傻佬\",second:\"傻佬\",third:\"傻佬\"}");

    }
    response.getOutputStream().write(jsObject.toString().getBytes("utf-8")); //通过respon.getOutputStream获取输出流 将数据传回jsp页面
  }

ajax使用形式如下：

$.ajax({
    url:"/AJAX_war_exploded/ClickServlet", //定义需转到的Servlet
    type:"post",　　　　　　　　　　　　　　　　//定义提交的形式
    data:{　　　　　　　　　　　　　　　　　　　//定义要传递的数据，以键值对形式存储
     buttonName:"button_2"
    },　　　　　　　　　　　　　　　　　　　　　//每个ajax都会让Servlet回传一个数据
    dataType:"json",　　　　　　　　　　　　　//定义回传数据的类型
    success:function(result){　　　　　　　//ajax收到回传的数据是会触发的事件success
     var first=result.first;
     var second=result.second;
     var third=result.third;
     $(".first")[0].innerHTML=first;　　　　//该形式使用了jQuery获取html元素
     $(".second")[0].innerHTML=second;
     $(".third")[0].innerHTML=third;
    }
   })
  })

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JQuery 又谈ajax局部刷新

    JQuery 再谈ajax局部刷新. 案例: 描述: 1. 点击登录则弹出登录对话框 2. 如果用户名密码不正确,则提示错误信息 3. 当输入信息正确,则刷新登录信息,显示用户名和退出按钮 4. 点击退出弹出提示信息,然后确定后再次刷新用户名,回到了第一幅图片的位置 那这些简单的操作,都需要做一些什么工作呢? 1. 加载登录/(用户名-退出)的页面 2. 点击登录连接,打开登录对话框 3. 登录form表单提交时,对信息进行验证. 4. 验证通过后,关闭对话框,同时刷新1中的页面,显示"用户名-

  • jQuery+ajax实现局部刷新的两种方法

    在项目中,经常会用到ajax,比如实现局部刷新,比如需要前后端交互等,这里呢分享局部刷新的两种方法,主要用的是ajax里面的.load(). 第一种: 当某几个页面都有相同的头部.导航.底部的时候,点击导航链接可以在几个页面中切换,此时想要的效果是点击链接后只切换内容部分,其他不再重新加载.上代码. jq-load.html: <!DOCTYPE html> <html> <head> <title>ajax局部刷新</title> </h

  • layui的checbox在Ajax局部刷新下的设置方法

    此情况只适用于手动拼接表格.. 页面加载时,checkbox会被渲染,so初始页面的checkbox是正常的 当我们自动添加checkbox,并且局部刷新的时候,新的复选框不会被渲染,所以显示是空白 解决办法: 1.需要添加一行代码(渲染后的checkbox代码) <input type="checkbox" lay-skin="primary"> <div class="layui-unselect layui-form-checkbo

  • 纯JS实现AJAX局部刷新功能

    AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScript和XML(标准通用标记语言的子集). AJAX 是一种用于创建快速动态网页的技术. 下面给大家介绍JS实现AJAX局部刷新功能,具体内容如下所示: 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. //

  • Ajax实现带有验证码的局部刷新登录界面

    Ajax实现带有验证码的局部刷新登录界面

    现在的登录界面大多数都带有:验证码的功能+验证码局部刷新+ajax登录.用ajax登录的好处最明显就是速度快,URL地址没有变化.所有现在登录功能很少再用form表单post提交了,大多数都已经采用了ajax局部访问后台然后解析返回值并显示结果到界面上面.理论还是要拿来实践才能验证的,下面直接上代码. 运行界面: 1.验证码后台访问部分上一篇博客已经介绍多了,这里介绍如何利用img中src实现局部刷新验证码的功能. html部分: <p><label class="lbrigh

  • ajax局部刷新实例 (三种方法推荐)

    ajax局部刷新 <script> setInterval("refreshTime()",1000); //每格1秒刷新一次 funciton refreshTime() { var dateObj = new Date(); time.innerHTML = dateObj.toLocaleDateString(); //刷新div里面的内容 } </script> <div id=time> </div> function doRe

  • Ajax+php数据交互并且局部刷新页面的实现详解

    Ajax+php数据交互并且局部刷新页面的实现详解

    什么是Ajax? 国内翻译常为"阿贾克斯"和阿贾克斯足球队同音,AJAX 是一种用于创建快速动态网页的技术,他不是新语言,而是一种使用现有标准的新方法.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新,这样就可以在不重新加载整个网页的情况下,对网页的某部分进行更新. XMLHttpRequest 是 AJAX 的基础,用于和服务器交换数据.所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject) 下面这篇文章主

  • jQuery ajaxSubmit 实现ajax提交表单局部刷新

    AJAX简介 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. 需要引入 : jquery-form.js 使用说明: Java代码 $(document).ready(function() { var options = { target: '#mydiv', // 需要刷新的区域

  • 基于ajax及jQurey实现局部刷新过程解析

    1.jQurey使用时需导入jquery-1.4.2.js在web文件夹下 并在写script时需像如下定义script标签: <script src="js/jquery-1.4.2.js" type="text/javascript"></script> 2.jQurey的语法:通过$(要选取的元素) 定义响应ajax的Servlet String buttonName=request.getParameter("buttonN

  • 基于ajax及jQuery实现局部刷新过程解析

    1.jQurey使用时需导入jquery-1.4.2.js在web文件夹下 并在写script时需像如下定义script标签: <script src="js/jquery-1.4.2.js" type="text/javascript"></script> 2.jQurey的语法:通过$(要选取的元素) 定义响应ajax的Servlet String buttonName=request.getParameter("buttonN

  • 实现AJAX异步调用和局部刷新的基本步骤

    目录 引言 1.创建XMLHttpRequest对象 2.创建HTTP请求 3.设置响应HTTP请求状态变化的函数 4.设置获取服务器返回数据的语句 5.发送HTTP请求 6.局部更新 7.完整的AJAX实例 总结 引言 要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤: (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象. (2)创建一个新的HTTP请求,并指定该HTTP请求的方法.URL及验证信息. (3)设置响应HTTP请求状态变化的函数. (4)发送HT

  • VUE注册全局组件和局部组件过程解析

    这篇文章主要介绍了VUE注册全局组件和局部组件过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 全局组件 第一步:在components文件夹下建立一个子文件Users.vue <template> <div class="users"> {{msg}} </div> </template> <script> export default { name: 'users'

  • 微信小程序返回上一页传参并刷新过程解析

    这篇文章主要介绍了微信小程序返回上一页传参并刷新过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 问题 微信小程序onLoad(options)方法在整个生命周期中只加载一次,也就是你进入下个页面,再返回时,是不会再次触发的,所以你返回是url传参是行不通了. 需求 现在有这么一个需求:一个商品支付页面,点击优惠卷进入优惠券列表页,选中优惠券后带着数据再返回到支付页面. 方法 一.使用到的方法是小程序的页面栈,感兴趣可以打印一下pages

  • 基于spring security实现登录注销功能过程解析

    这篇文章主要介绍了基于spring security实现登录注销功能过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.引入maven依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-security</artifactId> </dependenc

  • 基于python全局设置id 自动化测试元素定位过程解析

    背景: 在自动化化测试过程中,不方便准确获取页面的元素,或者在重构过程中方法修改造成元素层级改变,因此通过设置id准备定位. 一.python准备工作: 功能:用自动化的方式进行批量处理. 比如,你想要在大量的文本文件中执行查找/替换,或者以复杂的方式对大量的图片进行重命名和整理. 语法用例: #!/usr/bin/python //脚本语言的第一行,只对 Linux/Unix 用户适用,用来指定本脚本用什么解释器来执行,即:调用 /usr/bin 下的 python 解释器,推荐使用#!/us

  • 基于Tcl语言配置简单网络环境过程解析

    1. Tcl脚本文件circle.tcl代码注释 #设定模拟需要的一些属性 set val(chan) Channel/WirelessChannel set val(prop) Propagation/TwoRayGround set val(netif) Phy/WirelessPhy set val(mac) Mac/802_11 #将协议设置为 DSR 后,同时将队列设置为 CMUPriQueue set val(ifq) CMUPriQueue set val(ll) LL set v

  • 基于Python新建用户并产生随机密码过程解析

    说明:本次代码是在Linux下执行的,windows也可以用,把添加用户密码的命令改成windows的就ok了 用Python新建用户并产生随机密码 import passwd_name as pn #导入随机产生名字密码模块 import os f = open("/tmp/userlist.txt","w") 将用户名.密码写入该文件中 for i in range(0,3): #添加3位用户 username=pn.random_name() os.syste

随机推荐