jquery 框架使用教程 AJAX篇

小试了下AJAX,感觉比prototype简洁多了,在JQuery中,AJAX有三种实现方式:$.ajax(),$.post,$.get()。
XHTML(主要):
<div id="result" style="background:orange;border:1px solid red;width:300px;height:400px;"></div>
<form id="formtest" action="" method="post">
<p><span>输入姓名:</span><input type="text" name="username" id="input1" /></p>
<p><span>输入年龄:</span><input type="text" name="age" id="input2" /></p>
<p><span>输入性别:</span><input type="text" name="sex" id="input3" /></p>
<p><span>输入工作:</span><input type="text" name="job" id="input4" /></p>
</form>
<button id="send_ajax">提交</button>
<button id="test_post">POST提交</button>
<button id="test_get">GET提交</button>
JS:
1、引入jquery框架:
<script type="text/javascript" src="../js/jquery.js"></script>
2、构建AJAX,JQUERY的好处是不需要在XHTML中使用JS代码来触发事件了,可以直接封装在JS文件中:
<script type="text/javascript">
//$.ajax()方式
$(document).ready(function (){
$('#send_ajax').click(function (){ //直接把onclick事件写在了JS中,而不需要混在XHTML中了
var params=$('input').serialize(); //序列化表单的值,与prototype中的form.serialize()相同
$.ajax({
url :'ajax_test.php', //后台处理程序
type:'post', //数据发送方式
dataType:'json', //接受数据格式
data:params, //要传递的数据
success:update_page //回传函数(这里是函数名)
});
});
});
function update_page (json) { //回传函数实体,参数为XMLhttpRequest.responseText
var str="姓名:"+json.username+"<br />";
str+="年龄:"+json.age+"<br />";
str+="性别:"+json.sex+"<br />";
str+="工作:"+json.job;
$("#result").html(str);
}
//$.post()方式:
$(function (){ //$(document).ready(function (){ 的简写
$('#test_post').click(function (){
$.post('ajax_test.php',
{username:$('#input1').val(),age:$('#input2').val(),sex:$('#input3').val(),job:$('#input4').val()},
function (data){ //回传函数
var myjson='';
eval('myjson='+data+';');
$('#result').html("姓名:"+myjson.username+"<br />工作:"+myjson['job']);
});
});
});
//$.get()方式:
$(function (){
$('#test_get').click(function (){
$.get('ajax_test.php',
{username:$("#input1").val(),age:$("#input2").val(),sex:$("#input3").val(),job:$("#input4").val()},
function (data) {
var myjson='';
eval("myjson="+data+";");
$("#result").html(myjson.job);
});
});
});
</script>
PHP代码:
<?php
$arr=$_POST; //若以$.get()方式发送数据,则要改成$_GET.或者干脆:$_REQUEST
$myjson=json_encode($arr);
echo $myjson;
?>

(0)

相关推荐

  • 浅谈jQuery框架Ajax常用选项

    json(JavaScript Object Notation):轻量级的数据交换(交换的数据转换成与平台无关的)格式 java对象转换成json字符串,使用ObjectMapper类的writeValueAsString(java对象); 将json字符串或者json对象组成的数组字符串转成javascript对象使用javascript内置对象JSON提供的parse函数 $.ajax()方法 $.ajax({ url:请求地址(相对), type:请求类型, data:请求参数(可以字符串

  • 基于JQuery框架的AJAX实例代码

    index.html 复制代码 代码如下: <html> <head> <title>jQuery Ajax 实例演示</title> </head> <script src="./js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(docum

  • JQuery中Ajax的操作完整例子

    Java软件开发中,后台中我们可以通过各种框架,像SSH等进行对代码的封装,方便我们对Java代码的编写,例如,Struts,SpringMVC对从前台到action的流程进行封装控制,使我们只需要进行一些简单配置就可以实现:而spring进行了对各种对象的管理进行封装,提供了AOP编程的方式,大大方便了我们:而hibernate和IBatis则是对JDBC代码进行封装,不需要我们每次都写那些重复而繁杂的JDBC代码. 前台呢,对于页面一些效果,验证等,我们都是通过JavaScript语言进行完

  • Jquery AJAX 框架的使用方法

    刚开始学了 JQuqery, 众多的 $get(),...等等符号早已把我搞晕了.暂时就放弃了.后来学习 ASP.NET AJAX ,在微软的领导下,逐渐由服务器端转向客户端编程. 激起我客户端编程的兴趣,才想起学习一下了 Jquery.随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype.YUI.jQuery.mootools.Bindows以及国内的JSVM框架等,通过将这些JS框架应用到我们的项目中能够使程序员从设计和书写

  • jquery 框架使用教程 AJAX篇

    小试了下AJAX,感觉比prototype简洁多了,在JQuery中,AJAX有三种实现方式:$.ajax(),$.post,$.get(). XHTML(主要): <div id="result" style="background:orange;border:1px solid red;width:300px;height:400px;"></div> <form id="formtest" action=&qu

  • jQuery LigerUI 使用教程入门篇

    获取最新代码 可以到http://ligerui.googlecode.com下载最新代码. 简介 jQuery LigerUI 是基于jQuery的一系列UI控件组合,简单而又强大,致力于快速打造Web前端界面解决方案. 因为是前端控件,跟服务器无关,可以适合.net,jsp,php等等web服务器环境.目前全部插件的打包压缩JS只有100K左右,很轻巧.使用插件式的开发模式,以"简单"为原则的设计,每个插件尽量独立,并可依赖拓展. ligerUI是什么 jQuery LigerUI

  • jQuery LigerUI 使用教程表格篇(1)

    第一个例子 简介 ligerGrid是ligerui系列插件的核心控件,用户可以快速地创建一个美观,而且功能强大的表格,支持排序.分页.多表头.固定列等等. 支持本地数据和服务器数据(配置data或者url) 支持排序和分页(包括Javascript排序和分页) 支持列的"显示/隐藏" 支持多表头 支持固定列 支持明细行 支持汇总行 支持单元格模板 支持编辑表格(三种编辑模式,单元格编辑.行编辑.明细编辑) 支持树表格 支持分组 代码 首先引入基本的css和js文件 复制代码 代码如下

  • 分享10篇优秀的jQuery幻灯片制作教程及应用案例

    幻灯片效果是常用的内容展示方式之一,这是一种在有限的网页空间内展示系列项目时非常好的方法.今天要给大家分享的是10篇非常棒的 jQuery 幻灯片教程及16个优秀的 jQuery 幻灯片应用案例. 10篇 jQuery 幻灯片制作教程Create Beautiful jQuery slider tutorial jQuery Plugin – Feature List Create an Image Rotator with Description (CSS/jQuery) Moving Box

  • jQuery 技巧大全(新手入门篇)

    一.简介 1.1.概述随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype.YUI.jQuery.mootools.Bindows以及国内的JSVM框架等,通过将这些JS框架应用到我们的项目中能够使程序员从设计和书写繁杂的JS应用中解脱出来,将关注点转向功能需求而非实现细节上,从而提高项目的开发速度.jQuery是继prototype之后的又一个优秀的Javascript框架.它是由 John Resig 于 2006 年初创建

  • 原生js仿jquery一些常用方法(必看篇)

    最近迷上了原生js,能不用jquery等框架的情况都会手写一些js方法,记得刚接触前端的时候为了选择器而使用jquery...现在利用扩展原型的方法实现一些jquery函数: 1.显示/隐藏 //hide() Object.prototype.hide = function(){ this.style.display="none"; return this; } //show() Object.prototype.show = function(){ this.style.displa

  • 整理的40个有用的jQuery技术和教程

    1. Custom Animation Banner with jQuery 在该教程中你将学会如何使用jQuery的Easing插件及2D Transform插件创建自定义的动画横幅.教程的想法是将不同的元素以自定义动画的形式融入到横幅中去. 查看实例 2. Moving Boxes Carousel with jQuery 你将学会如何创建一个拥有改变面板及缩放面板的按钮的滑块. 查看实例 3. Quick Feedback Form – jQuery & PHP 通过jQuery和PHP实

  • jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)

    select2是一款jQuery插件,是普通form表单select组件的升级版. 可以定制搜索.远程数据集(Remote data,本篇主要介绍点).无限滚动(数据分页功能,这一点很妙).还有很多高端的参数设置(有需要的下次介绍). 内置了40种国际化语言,不过这里我们只需要用到中文. 同时支持现代和传统浏览器内置,甚至包括惹人不高兴的IE8. 那么,现在让我们开始一段select2的奇幻之旅吧! 一.惊艳的效果,来一睹为快吧 本地实战结果 二.导入css和js到网站上 1.使用CDN,节省自

  • 利用Vue-cli搭建Vue项目框架的教程详解

    首先安装node.js 1.在新建的目录中按住shift 鼠标右键,在此处打开命令窗口,版本保证在4.x以上 node -v 2.全局安装vue脚手架 npm install -g vue-cli 同时可以使用vue和vue list 命令查看 3.初始化模板配置和项目名字 vue init webpack mycharts mycharts是项目名 其中有许多需要选择的选项,eslint适合团队开发,规范代码之类的,个人开发我喜欢用stylus,所以这个选项我不会选n,其他Y 4.有提示就按e

随机推荐