ajax学习笔记3-jQuery实现ajax（大拇指向上）

jQuery实现ajax：

jQuery本身提供了一个ajax方法，jQuery.ajax([settings])

type:类型，”POST”或”GET”（默认）

url:发送请求的地址

data:是一个对象，连同请求发送到服务器的数据

dataType:预期服务器返回的数据类型，如果不指定，jQuery将自动根据HTTP包MIME信息来智能判断，一般采用json格式，可以设置为“json”

success:是一个方法，请求成功后的回调函数。传入返回后的数据，以及包含成功代码的字符串。

error:是一个方法，请求失败时调用此函数。传入XMLHttpRequest对象。

实现代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Demo</title><style>body,input,button,select,h1{font-size:26px;line-height:1.8;}</style>
</head>
<body><h1>员工查询</h1><label>请输入员工编号</label><input type="text" id="keyword" /><button id="search">查询</button><p id="searchResult"></p><h1>员工创建</h1><label>请输入员工姓名：</label><input type="text" id="staffName" /><br/><label>请输入员工编号：</label><input type="text" id="staffNumber" /><br/><label>请输入员工性别：<select id="staffSex"><option>男</option><option>女</option></select></label><br/><label>请输入员工职位：</label><input type="text" id="staffJob" /><br/><button id="save">保存</button><p id="createResult"></p><script src="jquery-3.1.1.js"></script><script>$(document).ready(function(){$("#search").click(function(){$.ajax({type:"GET",url:"service1.php?number="+$("#keyword").val(),dataType:"json",success:function(data){if(data.success){  //如果json对象的success为true，则返回msg$("#searchResult").html(data.msg);}else{$("#searchResult").html("出现错误:"+data.msg);}},error:function(jqXHR){alert("发生错误："+jqXHR.status);}});});$("#save").click(function(){$.ajax({type:"POST",url:"service1.php",dataType:"json",data:{name:$("#staffName").val(),number:$("#staffNumber").val(),sex:$("#staffSex").val(),job:$("#staffJob").val()},success:function(data){if(data.success){  //如果json对象的success为true，则返回msg$("#createResult").html(data.msg);}else{$("#createResult").html("出现错误:"+data.msg);}},error:function(jqXHR){alert("发生错误："+jqXHR.status);}});});});</script>
</body>
</html>

jQuery可以自动添加Content-Type。

转载于:https://www.cnblogs.com/haimengqingyuan/p/7071919.html

ajax学习笔记3-jQuery实现ajax（大拇指向上）相关推荐

Ajax学习笔记-动力节点-王鹤老师
Ajax学习笔记-动力节点-王鹤老师视频教程来自:https://www.bilibili.com/video/BV15k4y167XM?spm_id_from=333.999.0.0 第一节全局 ...
ajax的同步,设置JQuery的Ajax方法同步
如何设置jquery的ajax方法为同步 jax请求默认的都是异步的如果想同步 async设置为false就可以(默认是true) var html = $.ajax({ url: "so ...
Jquery ajax 学习笔记
本人的js & jq 一直是菜鸟级别,最近不忙就看了看ajax方面的知识,文中部分内容参考自这里&这里之前一直用js写ajax现在基于jq实现方便多了~ $.get & $. ...
前端学习笔记005：数据传输 + AJAX + axios
本文要学习的东西又多又杂,包含 JSON.XML.HTTP 协议.AJAX 请求.Promise.axios.(大家也可以看到我已经努力把题目缩到最短了(T_T))但这些知识对后面前端框架的学习是很有 ...
Ajax学习笔记--- 【xmind 详细展示浏览器与服务器端通信，请求与响应报文】
php和express用来做后端,还是express强大和方便!!! 翻看笔记才知道自己当时下载Fiddler,Wampserver,phpstudy_pro是为了什么,实在不敢说自己学过php 文章 ...
AJAX 学习笔记[四] AJAX 对服务器返回的XML 的处理
在AJAX 中,服务器端如果返回的XML 文档,则可以通过异步对象的responseXML 属性来获取器XML 数据.而开发者可以利用DOM 的相关方法对其进行处理. 假设服务器返回的XML 文档,如 ...
阿瑶的ajax学习笔记
1.AJAX简介 AJAX全称为Asynchronous JavaScript And XML,就是异步的 JS 和 XML. 通过AJAX可以在浏览器中向服务器发送异步请求,最大的优势: 无刷新获取 ...
史上最详细Ajax学习笔记
1.Ajax快速入门 1.1.AJAX介绍 AJAX(Asynchronous JavaScript And XML):异步的 JavaScript 和 XML. 本身不是一种新技术,而是多个技术综合 ...
一、AJAX学习笔记——原生AJAX （ajax简介、XML简介、ajax优缺点、ajax的使用）
第 1 章:原生 AJAX 1.1 AJAX 简介 AJAX 全称为 Asynchronous JavaScript And XML,就是异步的 JS 和 XML. 通过 AJAX 可以在浏览器中向服 ...

ajax学习笔记3-jQuery实现ajax（大拇指向上）

ajax学习笔记3-jQuery实现ajax（大拇指向上）相关推荐

最新文章

热门文章