正文
jquery案例,jquery案例购物车
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
jquery ajax请求的五个步骤
1、使用ajax发送数据的步骤
第一步：创建异步对象
var xhr = new XMLHttpRequest();
第二步：设置 请求行 open(请求方式，请求url):
// get请求如果有参数就需要在url后面拼接参数，
// post如果有参数，就在请求体中传递 xhr.open("get","validate.php?username="+name)
xhr.open("post","validate.php");
第三步：设置请求（GET方式忽略此步骤）头:setRequestHeader()
// 1.get不需要设置
// 2.post需要设置请求头：Content-Type:application/x-www-form-urlencoded
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
第四步：设置请求体 send()
// 1.get的参数在url拼接了，所以不需要在这个函数中设置
// 2.post的参数在这个函数中设置(如果有参数)
xhr.send(null) xhr.send("username="+name);
第五步：让异步对象接收服务器的响应数据
一个成功的响应有两个条件：
xhr.onreadystatechange = function(){
if(xhr.status == 200 xhr.readyState == 4){
console.log(xhr.responseText);
}
ajax-get方式请求案例：
var xhr = new XMLHttpRequest();
xhr.open("get","validate.php?username="+name);
xhr.send(null);
xhr.onreadystatechange = function(){
if(xhr.status == 200 xhr.readyState == 4){
console.log(xhr.responseText);
document.querySelector(".showmsg").innerHTML = xhr.responseText;;
}
}
ajax-post方式请求案例：
var xhr = new XMLHttpRequest();
xhr.open("post","validate.php");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("username="+name);
xhr.onreadystatechange = function(){
// 判断服务器是否响应，判断异步对象的响应状态
if(xhr.status == 200 xhr.readyState == 4){
document.querySelector(".showmsg").innerHTML = xhr.responseText;
}
}
二、Jquery中的Ajax
$.ajax({
type: "get",// get或者post
url: "abc.php",// 请求的url地址
data: {},//请求的参数
dataType: "json",//json写了jq会帮我们转换成数组或者对象 他已经用JSON.parse弄好了
timeout: 3000,//3秒后提示错误
beforeSend: function () {
// 发送之前就会进入这个函数
// return false 这个ajax就停止了不会发 如果没有return false 就会继续
},
success: function (data) { // 成功拿到结果放到这个函数 data就是拿到的结果
},
error: function () {//失败的函数
},
complete: function () {//不管成功还是失败 都会进这个函数
}
})
// 常用
$.ajax({
type: "get",
url: "",
data: {},
dataType: "json",
success: function (data) {
}
})
$.ajax() 都可以发
$.post(url,data,success,datatype):本质上只能发送post请求
$.get(url,data,success,datatype):本质上只能发送get请求
相关问答
Q1: 谁能提供个jquery的fullcalendar使用案例从数，据库读取日程数据
下面是我改造的代码,你只要修改myInin()中的方法，把那个ajax的注释去掉换成你的路径就ok
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"""
html
head
link rel='stylesheet' type='text/css' href='redmond/theme.css' /
link rel='stylesheet' type='text/css' href='fullcalendar.css' /
script type='text/javascript' src='jquery.js'/script
script type='text/javascript' src='jquery-ui-custom.js'/script
script type='text/javascript' src='fullcalendar.min.js'/script
script type='text/javascript'
//在页面加载后用jsonajax得到当前用的日程返回
function myInit(){
/**
访问服务器初始化日程
$.getJSON('../schedule.do?method=selectScheduleuserId=1',{},function(data){
for(var i=0;idata.length;i++){
// alert('--AA'+new Date('2010','4','5').toLocaleString());
var copiedEventObject =new Object();
copiedEventObject.start = new Date(data[i].year,data[i].month-0-1,data[i].date); //开始时间
copiedEventObject.title=data[i].title; //标题
copiedEventObject.id=data[i].id; //标题
copiedEventObject.end = new Date(data[i].eyear,data[i].emonth-0-1,data[i].edate); //开始时间
var bb=false;
if(data[i].hours==0data[i].minutes==0){
bb=true;
}
copiedEventObject.allDay = bb;
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true); //核心的插入代码
}
});
**/
var copiedEventObject =new Object();
copiedEventObject.start = new Date(); //开始时间
copiedEventObject.title='abc'; //标题
copiedEventObject.id=1
copiedEventObject.end = new Date();
var bb=false;
copiedEventObject.allDay = bb;
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true); //核心的插入代码
}
var objobj;
var sss=700;
var bbb=0;
var start="";
function myClick(){
bbb=0;
}
$(document).ready(function() {
/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events div.external-event').each(function() {
// create an Event Object ()
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()) // use the element's text as the event title
};
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
setTimeout('myInit()',1000); //不知道为什么不可以直接调用,你一个在前显示，一个在后显示？？？
});
/* initialize the calendar
-----------------------------------------------------------------*/
/**
events: [ //事件==一个日程
{
title: 'All Day Event',
start: new Date(2010, 9, 12)
}
],
**/
$('#calendar').fullCalendar({
theme: true,
header: { //设置头的标题
left: 'prev,next today',
center: 'title,month,agendaWeek,agendaDay',
right: 'prevYear,nextYear'
},
editable: true,
weekMode:'variable', //下一个属性要用
slotMinutes:30, //每个10分在周的视图
titleFormat:'yyyy年MM月dd日', //格式化时间
droppable: true, // this allows things to be dropped onto the calendar !!!
buttonText:{
prev: '昨天',
next: '明天',
prevYear: '去年',
nextYear: '明年',
today: '今天',
month: '月',
week: '周',
day: '日'
},
dayClick:function(date, allDay, jsEvent, view ) {
//天数点击
var copiedEventObject =new Object();
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
// render the event on the calendar
// the last `true` argument determines if the event "sticks" ()
var myTitle=null;
myTitle=prompt('你请输入你要取的名字(如吃饭)','吃饭');
if(myTitle==null){return false}
copiedEventObject.title=myTitle;
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true); //核心的插入代码
/**
bbb++;
if(bbb=2){
if(objobj.getTime()==date.getTime()){
window.location.href="../schedule.do?method=selectMeetstart="+start;
}else{
bbb=1;
}
}
objobj=date;
start=""+($.fullCalendar.formatDate(date,'yyyy-MM-dd HH:mm'));
setTimeout("myClick()",sss);
**/
//window.location.href="../schedule.do?method=selectMeetstart="+($.fullCalendar.formatDate(date,'yyyy-MM-dd HH:mm'));
},
eventDragStart:function(calEvent, jsEvent, ui, view){
//日程事件被拖动之前和之后触发. 这里的拖动不一定是一个有效的拖动
// alert('拖拽开始');
}
,
eventDragStop:function(calEvent, jsEvent, ui, view){
//日程事件被拖动之前和之后触发. 这里的拖动不一定是一个有效的拖动
// alert('拖拽结束');
}
,
eventDrop:function(calEvent, jsEvent, ui, view){
//日程事件被拖动之前和之后触发. 这里的拖动不一定是一个有效的拖动
//alert('拖拽成功');
// alert(calEvent.id+'--'+calEvent.start.toLocaleString()+'--'+(calEvent.end==null?null:calEvent.end.toLocaleString())+'--'+calEvent.title);
/*
var data="id="+calEvent.id+"column=startvalue="+($.fullCalendar.formatDate(calEvent.start,'yyyy-MM-dd HH:mm'));
$.ajax({
type:"POST",
url:"../schedule.do?method=scheduleUpdate",
data:data,
success:function(data){
}
});
var date=calEvent.start;
if(calEvent.end!=null){
date=calEvent.end;
}
var data="id="+calEvent.id+"column=endvalue="+($.fullCalendar.formatDate(date,'yyyy-MM-dd HH:mm'));
$.ajax({
type:"POST",
url:"../schedule.do?method=scheduleUpdate",
data:data,
success:function(data){
}
});
*/
}
,
eventResize: function(calEvent, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view){
//alert('改变大小成功');
//alert(calEvent.id+'--'+calEvent.start.toLocaleString()+'--'+(calEvent.end==null?null:calEvent.end.toLocaleString())+'--'+calEvent.title);
/**
var data="id="+calEvent.id+"column=startvalue="+($.fullCalendar.formatDate(calEvent.start,'yyyy-MM-dd HH:mm'));
var date=new Date(calEvent.start);
if(calEvent.end!=null){
date=new Date(calEvent.end);
//date.setDate(date.getDate()-0+dayDelta);
}
var data="id="+calEvent.id+"column=endvalue="+($.fullCalendar.formatDate(date,'yyyy-MM-dd HH:mm'));
$.ajax({
type:"POST",
url:"../schedule.do?method=scheduleUpdate",
data:data,
success:function(data){
}
});
**/
}
,
eventClick:function(calEvent,jsEvent,view) {
//点击日程的触发
/*
alert(calEvent.title+'--'+jsEvent+'--'+view);
var myTitle=prompt('你请输入你要取的名字(如吃饭)','吃饭11');
if(myTitle==null){return false}
calEvent.title=myTitle;
$('#calendar').fullCalendar('renderEvent', true); //刷新
*/
// var str="../schedule.do?ifUpdate=1method=selectRiChengsid="+calEvent.id;
// window.location.href=str;
},
drop: function(date, allDay) { // this function is called when something is dropped
var myTitle=prompt('你请输入你要取的名字(如吃饭)','吃饭');
if(myTitle==null){return false}
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
copiedEventObject.title=myTitle;
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
// render the event on the calendar
// the last `true` argument determines if the event "sticks" ()
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true); //核心的插入代码
}
});
});
/script
style type='text/css'
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#wrap {
width: 1100px;
margin: 0 auto;
}
#external-events {
float: left;
width: 150px;
padding: 0 10px;
border: 1px solid #ccc;
background: #eee;
text-align: left;
}
#external-events h4 {
font-size: 16px;
margin-top: 0;
padding-top: 1em;
}
.external-event { /* try to mimick the look of a real event */
margin: 10px 0;
padding: 2px 4px;
background: #3366CC;
color: #fff;
font-size: .85em;
cursor: pointer;
}
#external-events p {
margin: 1.5em 0;
font-size: 11px;
color: #666;
}
#external-events p input {
margin: 0;
vertical-align: middle;
}
#calendar {
float: right;
width: 900px;
}
/style
/head
body
div id='wrap'
div id='external-events' style="display:none"
动态拖拽添加
div class='external-event'My Event 1/div
/div
div id='calendar' style="float: none;"/div
div style='clear:both'/div
/div
/body
/html
Q2: jQuery自定义元素右键点击事件(实现案例)
大多数情况下我们使用左键来进行页面交互，而右键大部分对于开发者来说是审查元素的，有的时候我们也要自定义鼠标右键点击行为来达到更好的交互性，常见的有漫画左键前进、右键后退。
第一步我们要屏蔽浏览器默认的右键点击行为，即阻止弹出框。
首先要将阻止弹出函数绑定到目标元素上：
//阻止浏览器默认右键点击事件
$("div").bind("contextmenu",
function(){
return
false;
})
如此一来，div元素的右击事件就被屏蔽了，而浏览器其他区域不受影响，如果你想在整个页面屏蔽右击事件，只需这样做：
document.oncontextmenu
=
function()
{
return
false;
}
接下来就可以为元素绑定右击响应函数了：
$("div").mousedown(function(e)
{
console.log(e.which);
//右键为3
if
(3
==
e.which)
{
$(this).css({
"font-size":
"-=2px"
});
}
else
if
(1
==
e.which)
{
//左键为1
$(this).css({
"font-size":
"+=3px"
});
}
})
示例效果为右击字体缩小，左击字体变大，且其它区域可以响应默认右击事件。
完整代码：
head
style
type="text/css"
div{
font-size:20px;
}
/style
script
src="../jquery.js"/script
script
$(function()
{
//阻止浏览器默认右键点击事件
/*document.oncontextmenu
=
function()
{
return
false;
}*/
//某元素组织右键点击事件
$("div").bind("contextmenu",
function(){
return
false;
})
$("div").mousedown(function(e)
{
console.log(e.which);
//右键为3
if
(3
==
e.which)
{
$(this).css({
"font-size":
"-=2px"
});
}
else
if
(1
==
e.which)
{
//左键为1
$(this).css({
"font-size":
"+=3px"
});
}
})
})
/script
/head
body
div
div
/div
/body
以上这篇jQuery自定义元素右键点击事件(实现案例)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
Q3: Jquery+ajax实现局部刷新案例！
以新增用户为例，这是jsp部分代码。
%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%
!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""
html
head
title新增用户/title
link rel="stylesheet"
href="${pageContext.request.contextPath}/common/css/plantform/common.css"
type="text/css" /
script type="text/javascript"
src="${pageContext.request.contextPath}/common/js/jquery-1.7.js"/script
script type="text/javascript"
src="${pageContext.request.contextPath}/common/js/jquery.artDialog.js?skin=blue"
charset="UTF-8"/script
script type="text/javascript"
src="${pageContext.request.contextPath}/common/js/iframeTools.js"
charset="UTF-8"/script
link
href="${pageContext.request.contextPath}/common/css/plantform/list.css"
rel="stylesheet" type="text/css" /
link
href="${pageContext.request.contextPath}/common/css/plantform/index.css"
rel="stylesheet" type="text/css" /
script type="text/javascript"
function getOrgInfo() {
art.dialog.open('./orgnization/show_org_dbselect', {
title : '选择归属地域',
width : 300,
height : 600,
lock : true,
}, false);
}
function doAddUser() {
var orgId = $("#orgId").val(); （通过id获取页面输入的值）
var userName = $('#userName').val();
var loginName = $("#loginName").val();
var password_f = $("#password_f").val();
var password_s = $("#password_s").val();
var userRole = $('#userRole').val();
var phoneNum = $('#phoneNum').val();
if (password_f == null || password_f == '') {
alert('请输入登录密码！');
return false;
}
if (password_s == null || password_s == '') {
alert('请输入确认密码！');
return false;
}
if (password_s != password_f) {
alert('密码不一致，请重新输入！');
return false;
}
if(orgId == null||orgId == ''){
alert('请选择用户所属地域！');
return false;
}
（这边就是ajax局部刷新）
$.ajax({
type : "POST",
url : "../user/do_add_Customer",（要跳转的action）
async : false,
data : {
"userName":userName,
"loginName":loginName,
"password":password_f,
"orgId":orgId,
"userRole":userRole,
"phoneNum":phoneNum
},
success : function(data) { （action处理完后返回的结果，就是局部刷新，页面不跳转）
var obj = eval('('+data+')');
if(obj.RESULT=='ok'){
alert("用户信息设置完成！");
art.dialog.opener.$('#orgId').val(orgId);
art.dialog.close();
}else if(obj.RESULT=='repeatUser'){
alert("用户登录名重复！");
}else{
alert("系统异常！");
}
}
});
}
/script
/head
body
input type="hidden" value="" name="orgId" id="orgId" /
div class="gw_main fh"
div class="w_input_list fh"
div class="input_01 w01"用户名/div
div class="input_02"
input type="text" name="userName" id="userName"
class="w13" value="${user.userName}" readonly="readonly"/font color="red"*/font
/div
/div
div class="w_input_list fh"
div class="input_01 w01"登录名/div
div class="input_02"
input type="text" name="loginName" id="loginName"
class="w13" value="${user.loginName}" readonly="readonly"/font color="red"*/font
/div
/div
div class="w_input_list fh"
div class="input_01 w01"登录密码/div
div class="input_02"
input type="password" name="password_f" id="password_f"
class="w13" /font color="red"*/font
/div
/div
div class="w_input_list fh"
div class="input_01 w01"确认密码/div
div class="input_02"
input type="password" name="password_s" id="password_s"
class="w13" /font color="red"*/font
/div
/div
div class="w_input_list fh"
div class="input_01 w01"所属地域/div
div class="input_02"
input type="text" name="orgName" id="orgName"
class="w13" value="" readonly="readonly" /font color="red"*/font
/div
div class="input_02 w06"
div class="button fh"
a href="#" class="fl" onClick="getOrgInfo()"span选择/span/a
/div
/div
/div
div class="w_input_list fh"
div class="input_01 w01"用户权限/div
div class="input_02"
select name="userRole" id="userRole" style="float:left;height:23px;margin-right:5px;"
option value="1"一般用户/option
option value="2"管理员用户/option
/select
/div
/div
div class="w_input_list fh"
div class="input_01 w01"联系电话/div
div class="input_02"
input type="text" name="phoneNum" id="phoneNum"
class="w13" value="${user.phoneNum }" readonly="readonly"/
/div
/div
div class="w_footer fh"
div class="aui_buttons fr"
button class="aui_state_highlight" type="button" onClick="doAddUser();" 确认/button
/div
/div
/div
/body
/html
action部分jsp部分跳转的action
@Action(value = "do_add_Customer")
public String doAddCustomer(){
init();
JSONObject js = new JSONObject();
//检测系统内是否存在此登录名的账号
try{
ListUser userList = this.userControlService.getUserByLoginName(loginName,user.getId());
if(userList!=nulluserList.size()0){
js.put("RESULT", REPEATUSER);
}else{
//新增机电用户信息
Integer userId = this.userControlService.addCustomer(userName,loginName,password,orgId,userRole,phoneNum);
if(userId!=nulluserId0){
js.put("RESULT", OK);
js.put("VALUE", userId);
}else{
js.put("RESULT", SYSERROR);
}
}
}catch (Exception e) {
js.put("RESULT", SYSERROR);
}
Response_Writer.writeObject(js);
return null;
}
这里是将你处理玩的结果通过json的方式返回给jsp页面，页面在处理。如有问题可以再询问。要想局部刷新ajax方法会就可以了。
