分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

jquery的AJAX

发布时间:2023-09-06 01:16责任编辑:苏小强关键词:暂无标签
JQuery的AJAX部分的API

(1)jquery对象.load(url,params,function(数据){});(理解)
(2)$.get(url,params,function(数据){},type); 发送get请求的ajax
  url:请求的路径
  params:请求的参数 参数为key\value的形式 key=value ?{"":"","":""}
  function:回调函数 参数就是服务器发送回来的数据
  type:返回内容格式,xml, html, script, json, text, _default。 ???以后用"json"

(3)$.post(url,params,function(数据){},type); 发送post请求的ajax
  
(4)$.ajax([选项]);
  选项的可选值:
  url:请求路径
  type:请求方法
  data:发送到服务器的数据
  success:fn 成功以后的回调
  error:fn 异常之后的回调
  dataType:返回内容格式 经常使用json
  async:设置是否是异步请求
  例如:

 $.ajax({ ???????????????url:url, ???????????????type:"post", ???????????????data:params, ???????????????success:function(d){ ???????????????????alert(d.msg); ???????????????}, ???????????????error:function(){}, ???????????????dataType:"json" ???????????????????????????});

若结果为json格式, 打印返回值的时候是一个对象 
  例如若json为 {"result":"success","msg":"成功"}
  获取msg 只需要参数.msg

1、前端ajax

导入js:http://pan.baidu.com/s/1jHLRVTk

<%@ page language="java" contentType="text/html; charset=UTF-8" ???pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"></script><title>Insert title here</title><script type="text/javascript"> ???$(function(){ ???????$("#btn").click(function(){ ???????????var url="/day15/jqueryAjax"; ???????????//var params="username=张三"; ???????????var params={"username":"张苏纳"}; ???????????//load方式 ???????????/* $(this).load(url,params,function(d){ ???????????????alert(d); ???????????}); */ ???????????????????????//get方式 ???????????/* $.get(url,params,function(d){ ???????????????alert(d) ???????????}); */ ???????????????????????//post方式 ???????????/* $.post(url,params,function(d){ ???????????????alert(d.msg); ???????????},"json"); */ ???????????????????????//ajax 方式 ???????????$.ajax({ ???????????????url:url, ???????????????type:"post", ???????????????data:params, ???????????????success:function(d){ ???????????????????alert(d.msg); ???????????????}, ???????????????error:function(){}, ???????????????dataType:"json" ???????????????????????????}); ???????}); ???????????})</script></head><body> ???<input type="button" id="btn" value="点我"></body></html>

2、servlet

package com.itheima.jquery_ajax;import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;/** * jquery的ajax */public class JqueryAjaxServlet extends HttpServlet { ???private static final long serialVersionUID = 1L; ???protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { ???????System.out.println("请求方式:"+request.getMethod()); ???????????????//接受参数 ???????String username = request.getParameter("username"); ???????username=new String(username.getBytes("iso-8859-1"),"utf-8"); ???????System.out.println(username); ???????????????//响应数据 ???????response.getWriter().print("success"); ???} ???protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { ???????request.setCharacterEncoding("utf-8"); ???????System.out.println("请求方式:"+request.getMethod()); ???????????????//接受参数 ???????String username = request.getParameter("username"); ???????System.out.println(username); ???????//response.getWriter().print("success"); ???????????????//{"result":"success","msg":"成功"} ???????String s="{\"result\":\"success\",\"msg\":\"成功\"}"; ???????????????//响应数据 ???????response.setContentType("text/html;charset=utf-8"); ???????response.getWriter().print(s); ???}}

3、配置web.xml

<servlet> ???<description></description> ???<display-name>JqueryAjaxServlet</display-name> ???<servlet-name>JqueryAjaxServlet</servlet-name> ???<servlet-class>com.itheima.jquery_ajax.JqueryAjaxServlet</servlet-class> ?</servlet> ?<servlet-mapping> ???<servlet-name>JqueryAjaxServlet</servlet-name> ???<url-pattern>/jqueryAjax</url-pattern> ?</servlet-mapping>

问题

<script>是在前还是在后

jQuery选择器

参考:http://www.w3school.com.cn/jquery/jquery_intro.asp

层次选择器 ★ ???????a b:a的所有b后代 ???????a>b:a的所有b孩子 ???????a+b:a的下一个兄弟(大弟弟) ???????a~b:a的所有弟弟 ???基本过滤选择器:★ ???????:frist 第一个 ???????:last 最后一个 ???????:odd ?索引奇数 ???????:even 索引偶数 ???????:eq(index) 指定索引 ???????:gt(index) > ???????:lt(index) < ???内容过滤: ???????:has("选择器"):包含指定选择器的元素 ???可见过滤: ???????:hidden ??在页面不展示元素 一般指 input type="hidden" 和 样式中display:none ???????:visible ????属性过滤器:★ ???????[属性名] ???????[属性名="值"] ???表单过滤: ???????:input ?所有的表单子标签 ?input select textarea button ???????//input

jquery的AJAX

原文地址:http://www.cnblogs.com/Michael2397/p/7643648.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved