基于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("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.web.xml中是否配置了字符拦截器 <filter> <filter-name>encodingFilter</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter

  • Jquery ajax书写方法代码实例解析

    Ajax在前端的应用极其广泛,因此,我们有必要对其进行总结,以方便后期的使用. AJAX优点: 可以异步请求服务器的数据,实现页面数据的实时动态加载, 在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容. jquery在全局对象jquery(也就是$)绑定了ajax()函数,可以处理Ajax请求,ajax常用的配置选项有: async 是否异步执行,默认为True,千万不要指定为False method 发送的Method,缺省为"GET",可指定为'POST','P

  • JQuery Ajax如何实现注册检测用户名

    Ajax(无需等待直接向服务器发起请求) (Asynchronous Javascript And Xml) :异步的 Google创新的一种js技术 方法一:比较原始没有封装的方法: //核对用户名是否可用 var xmlhttp = null; function checkUser(userName) { if (xmlhttp == null) { xmlhttp = new XMLHttpRequest();//第一步:创建一步通信对象 } //第二步:设定回调函数 xmlhttp.on

  • php+jQuery ajax实现的实时刷新显示数据功能示例

    本文实例讲述了php+jQuery ajax实现的实时刷新显示数据功能.分享给大家供大家参考,具体如下: 创建数据表:demo -- -- 表的结构 `demo` -- CREATE TABLE IF NOT EXISTS `demo` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(20) COLLATE utf8_bin NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CH

  • jquery ajax 检测用户注册时用户名是否存在

    首先需要一个添加年级的页面,暂时叫grade.htm 这个文件需要引入两个文件jquery.js(jquery框架文件)和grade.js(验证的单独文件). 下面的input用于输入用户名字,id="gradeInfo"是为了显示提示信息用的. grade.htm 复制代码 代码如下: <input type="text" size="6" name="NAME" id="NAME"/><

  • Asp.net下利用Jquery Ajax实现用户注册检测（验证用户名是否存）

    Asp.net下利用Jquery Ajax实现用户注册检测（验证用户名是否存）

    其中用到了jquery插件来验证用户名哦,这里是利用jquery ajax来验证用户名是否存在哦.大家看看效果图,后面将附上源码下载. jquery框架实现的ajax 验证用户名是否存在的部分JS 复制代码 代码如下: $("#accounts").formValidator({onshow:"请输入用户名",onfocus:"用户名至少4个字符,最多10个字符",oncorrect:"该用户名可以注册"}).inputVal

  • jQuery+Ajax实现用户名重名实时检测

    利用jQuery框架,封装了底层的Ajax异步技术,通过简单的方法调用即可实现.这篇博客是针对用户注册时出现的用户名重名问题的自动检测,利用的技术是Ajax异步传输. register.jsp 注册显示页面 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTM

  • jquery+ajax实现异步上传文件显示进度条

    前言: 今天项目中加了一个上传文件加进度条的需求,我就搞了一下.时间宝贵不多说,直接进入正题. 异步上传文件是要用到ajax里的一个小的知识点:xhr(XML Http Request)一个对象,xhr对象也是ajax一个核心. 关于使用它也很简单:就四步(下面这样写也可以向后端进行发送请求) var xhr=new XMLHttpRequest()//创建xhr对象 xhr.open('请求方式','请求的地址') xhr.send()//发佛那个请求 xhr.onreadystatechan

  • 基于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及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

  • 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异步调用和局部刷新的基本步骤

    目录 引言 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

  • jQuery 定时局部刷新(setInterval)

    复制代码 代码如下: <head> <script src="jQuery/jquery-1.4.1.min.js" type="text/javascript"></script> <script> $(document).ready(function () { setInterval("startRequest()",1000); }); function startRequest() { $(

  • 基于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

随机推荐