函数读取页面的方法,方法实例详解
分类:计算机网络

用 jQuery 的都知道,jQuery 的 get 和 post 方法有三个参数:地址,数据 和回调函数,但我们知道地址也可以跟随数据的(形如:get_data.php?v1=1&v2=2),而且第二个参数可以省略,即第二个参数可 以直接写回调函数,那么数据写在地址后面和写在 data 参数里有什么区别呢?
刚刚做了几个实验,看看下面的代码就清楚了:
以下内容需要回复才能看到

jQuery中ajax的load()与post()方法实例详解,jqueryajax

本文实例讲述了jQuery中ajax的load()与post()方法。分享给大家供大家参考,具体如下:

一、load()方法

在jQuery ajax的load()方法能够载入远程 HTML 文件代码并插入至 DOM 中,这个与post,get还是有一点的区别,但可以快速在页面加载时就加载一个页面的html保存到dom中并且可执行哦。

load()方法默认使用 GET 方式, 如果传递了data参数则使用Post方式.

传递附加参数时自动转换为 POST 方式。jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector", 默认的选择器是"body>*".

讲解:

load是最简单的Ajax函数, 但是使用具有局限性:

1.它主要用于直接返回HTML的Ajax接口
2.load是一个jQuery包装集方法,需要在jQuery包装集上调用,并且会将返回的HTML加载到对象中, 即使设置了回调函数也不过不可否认load接口设计巧妙并且使用简单.下面通过示例来演示Load接口的使用:

load()函数:

函数介绍:load(url, [data], [callback]) 返回值:jQuery

参数说明:

url:待装入 HTML 网页网址。
data:(可选参数)发送至服务器的 key/value 数据。
callback:(可选参数)载入成功时回调函数。

下面进行实例演示:

首先建立需要加载的test.html文件:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajax演示</title>
</head>
<body>
帮客之家(www.jb51.net),提供大量脚本及素材供大家下载!
</body>
</html>

然后建立ajax.html文件,记得引入jquery。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./jquery-1.7.1.min.js"></script>
<script>
 $(document).ready(function(){
 $("#btn").click(function(){
  $("#result").load("test.html",function(responseText,textStatus){
  $("#display").append("<hr>responseText:"+responseText);
  $("#display").append("<hr>textStatus:"+textStatus);
  }); 
 });
 });
</script>
</head>
<body>
<input type="button" value="测试" id="btn" />
<h2>显示的内容如下:</h2>
<div id="result"></div>
<h2>结果:</h2>
<div id="display"></div>
</body>
</html>

上面的示例演示了如何使用Load方法.

提示:

① 我们要时刻注意浏览器缓存,  当使用GET方式时要添加时间戳参数 (net Date()).getTime() 来保证每次发送的URL不同, 可以避免浏览器缓存.

② 当在url参数后面添加了一个空格, 比如"  "的时候, 会出现"无法识别符号"的错误, 请求还是能正常发送. 但是无法加载HTML到DOM. 删除后问题解决.

二、post()方法

在jquery中的ajax有二个数据发送模式,一种是get(),前面的文章有讲过,另一种是post()。这里再来给大家介绍一下,有需要了解的朋友可参考.

首先认识要jQuery.post(url, [data], [callback], [type])

对参数进行说明:

url:发送请求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。
type:返回内容格式,xml, html, script, json, text, _default。

说明:

通过远程 HTTP POST 请求载入信息。

这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。

先来看一个简单的实例
复制代码 代码如下:<?php echo json_encode(array("name"=>$_POST['name']));?>
然后建立ajax.html文件,注意js代码:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./jquery-1.7.1.min.js"></script>
<script>
 $(document).ready(function(){
 $("#sub").click(function(){
  $.post("testPost.php",{name:$("#name").val()},function(data,textStatus){
  $("#result").append("data:"+data.name);
  $("#result").append("<br>textStatus:"+textStatus);
  },"json");
  return false;
 });
 });
</script>
</head>
<body>
<form action="testPost.php" method="post">
 <input type="text" name="name" id="name" >
 <input type="submit" id="sub" value="提交">
</form>
<h2>显示的内容如下:</h2>
<div id="result"></div>
</body>
</html>

用法2:(点击post数据返回数据)

<input type="button" id="bnajax" value="ajax" onclick="ajaxTest()" />
<script type="text/javascript" >
 function ajaxTest()
 {
 $.post("http://localhost:8012/t.asp", { "txt": "123" },function(data)
 {
  $("#divMsg").html(data);
 }
 );
 }
</script>

例3

JS代码:

<script>
$(document).ready(function(){
  $(".ajax_btn").click(function(){
   $.post("ajax.php",//异步处理动态页面
   {name:$(".name").val()},//获取类名为"name"文本的值,以NAME异步传值
   function(data){//data为反回值,function进行反回值处理
     $(".content").val(data);//获得得反回值后,将其填入到类名为"content"的文本框中
   });
  })
})
</script>

ajax.php代码:

<?php
$name=$_POST["name"];
if($name=="netxu"){
  echo "对不起,".$name."数据存在";
}
else{
  echo "恭喜你,".$name."可以使用";
}
?>

希望本文所述对大家jQuery程序设计有所帮助。

本文实例讲述了jQuery中ajax的load()与post()方法。分享给大家供大家参考,具体如下:

jQuery中通过ajax的get()函数读取页面的方法,jqueryajax

首先介绍get()函数:

url,[data],[callback],[type]

参数说明:
url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式,xml, html, script, json, text, _default。
首先建立testGet.php实例:

<?php
$web = $_GET['webname'];
echo "你现在访问的网站是:".$web;
?>

然见建立ajax.html文件:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>php点点通 - 关注php开发,提供专业web开发教程! </title>
<script type="text/javascript" src="./jquery-1.7.1.min.js"></script>
<script>
 $(document).ready(function(){
  $("#btn").click(function(){
   $.get("testGet.php",{web:"www.phpddt.com"},function(data,textStatus){
    $("#result").append("data:"+data);
    $("#result").append("<br>textStatus:"+textStatus);
   });  
  });
 });
</script>
</head>
<body>
<input type="button" value="测试" id="btn" />
<h2>显示的内容如下:</h2>
<div id="result"></div>
</body>
</html>

测试前的初始页面是:

图片 1

点击测试后的结果是:

图片 2

jquery_data.php

您可能感兴趣的文章:

  • jquery 读取页面load get post ajax 四种方式代码写法
  • jQuery中Ajax的load方法详解
  • jQuery中ajax的load()方法用法实例
  • 防止jQuery ajax Load使用缓存的方法小结
  • jQuery Ajax之load()方法
  • jquery中AJAX请求 $.post方法的使用
  • jQuery中ajax - post() 方法实例详解
  • Jquery中$.post和$.ajax的用法小结
  • jQuery中ajax的post()方法用法实例

本文实例讲述了jQuery中ajax的load()与post()方法。分享给大家供大家参考,具体如下: 一、l...

一、load()方法

您可能感兴趣的文章:

  • jQuery Ajax之$.get()方法和$.post()方法
  • jquery 读取页面load get post ajax 四种方式代码写法
  • Jquery Ajax的Get方式时需要注意URL地方
  • jquery用get实现ajax在ie里面刷新不进入后台解决方法
  • Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
  • Jquery AJAX POST与GET之间的区别
  • jquery的ajax和getJson跨域获取json数据的实现方法
  • jquery中get,post和ajax方法的使用小结
  • jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
  • jQuery+ajax中getJSON() 用法实例
  • jQuery中ajax的get()方法用法实例
  • jQuery中Ajax的get、post等方法详解
  • Jquery中ajax提交表单几种方法(get、post两种方法)
  • jQuery中ajax - get() 方法实例详解
  • jQuery Ajax 实例详解 ($.ajax、$.post、$.get)

首先介绍get()函数: url,[data],[callback],[type] 参数说明: url:待载入页面的URL地址 data:待发...

echo "post: ";
print_r($_POST);
echo "get: ";
print_r($_GET);
?>

在jQuery ajax的load()方法能够载入远程 HTML 文件代码并插入至 DOM 中,这个与post,get还是有一点的区别,但可以快速在页面加载时就加载一个页面的html保存到dom中并且可执行哦。

jquery_test.html

load()方法默认使用 GET 方式, 如果传递了data参数则使用Post方式.

实验1:

传递附加参数时自动转换为 POST 方式。jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector", 默认的选择器是"body>*".

$(function() {
// post 方法,两处都有数据
$.post('jquery_data.php?v1=1', {v2: 2}, function(data) {
$('
').append(data).appendTo('body');
});
});

讲解:

返回结果:

load是最简单的Ajax函数, 但是使用具有局限性:

post: Array
(
[v2] => 2
)
get: Array
(
[v1] => 1
)

1.它主要用于直接返回HTML的Ajax接口
2.load是一个jQuery包装集方法,需要在jQuery包装集上调用,并且会将返回的HTML加载到对象中, 即使设置了回调函数也不过不可否认load接口设计巧妙并且使用简单.下面通过示例来演示Load接口的使用:

实验2:

load()函数:

$(function()
{
// post 方法,数据在地址后面, 第二个参数为回调函数
$.post('jquery_data.php?v1=1', function(data)
{
$('<pre/>').append(data).appendTo('body');
});
});

函数介绍:load(url, [data], [callback]) 返回值:jQuery

返回结果,数据在 get 中:

参数说明:

post: Array
(
)
get: Array
(
[v1] => 1
)

url:待装入 HTML 网页网址。
data:(可选参数)发送至服务器的 key/value 数据。
callback:(可选参数)载入成功时回调函数。

实验3:

下面进行实例演示:

$(function()
{
// get 方法,用 data 参数传值
$.get('jquery_data.php', {v2: 2}, function(data)
{
$('<pre/>').append(data).appendTo('body');
});
});

首先建立需要加载的test.html文件:

返回结果,数据在 get 中:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajax演示</title>
</head>
<body>
脚本之家(www.jb51.net),提供大量脚本及素材供大家下载!
</body>
</html>
post: Array
(
)
get: Array
(
[v2] => 2
)

然后建立ajax.html文件,记得引入jquery。

实验4:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./jquery-1.7.1.min.js"></script>
<script>
 $(document).ready(function(){
 $("#btn").click(function(){
  $("#result").load("test.html",function(responseText,textStatus){
  $("#display").append("<hr>responseText:"+responseText);
  $("#display").append("<hr>textStatus:"+textStatus);
  }); 
 });
 });
</script>
</head>
<body>
<input type="button" value="测试" id="btn" />
<h2>显示的内容如下:</h2>
<div id="result"></div>
<h2>结果:</h2>
<div id="display"></div>
</body>
</html>
$(function()
{
// get 方法,两处都有数据
$.get('jquery_data.php?v1=1', {v2: 2}, function(data)
{
$('<pre/>').append(data).appendTo('body');
});
});

上面的示例演示了如何使用Load方法.

返回结果,两处数据被合并了,都在 get 中:

提示:

post: Array
(
)
get: Array
(
[v1] => 1
[v2] => 2
)

① 我们要时刻注意浏览器缓存,  当使用GET方式时要添加时间戳参数 (net Date()).getTime() 来保证每次发送的URL不同, 可以避免浏览器缓存.

实验5:

② 当在url参数后面添加了一个空格, 比如"  "的时候, 会出现"无法识别符号"的错误, 请求还是能正常发送. 但是无法加载HTML到DOM. 删除后问题解决.

$(function()
{
// get 方法,两处都有数据,且变量名相同
$.get('jquery_data.php?v2=1', {v2: 2}, function(data)
{
$('<pre/>').append(data).appendTo('body');
});
});

二、post()方法

返回结果,数据在 get 中,且 data 参数中的数据覆盖了地址后面的数据:

在jquery中的ajax有二个数据发送模式,一种是get(),前面的文章有讲过,另一种是post()。这里再来给大家介绍一下,有需要了解的朋友可参考.

post: Array
(
)
get: Array
(
[v2] => 2
)

首先认识要jQuery.post(url, [data], [callback], [type])

通过这几个简单的小例子不难看出,地址后面的数据永远是以 get 形式传递的,无论使用的是 get 方法还是 post 方法;而 data 参数中的数据是根据方法决定传递方式的。

对参数进行说明:

因此,为了避免混淆,建议大家尽量不要把数据写在地址后面,而是统一放在 data 参数中。

url:发送请求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。
type:返回内容格式,xml, html, script, json, text, _default。

当然,如果你想在用 post 方法时,同时利用 get 传值,那么就可以把要以 get 方式传递的数据写在地址后面,把要以 post 方式传递的数据写在 data 参数中。

说明:

总之方法是死的,人是活的,怎么用还要看实际情况。子曾经曰过:实践是检验真理的唯一标准。没事做做实验,掌握知识更牢固。

通过远程 HTTP POST 请求载入信息。

您可能感兴趣的文章:

  • jQuery中通过ajax的get()函数读取页面的方法
  • jQuery中ajax - get() 方法实例详解
  • Jquery中ajax提交表单几种方法(get、post两种方法)
  • jQuery使用$.get()方法从服务器文件载入数据实例
  • jQuery通过控制节点实现仅在前台通过get方法完成参数传递
  • jQuery中Ajax的get、post等方法详解
  • JQuery.get提交页面不跳转的解决方法
  • jQuery中get()方法用法实例
  • jQuery中ajax的get()方法用法实例
  • jquery中get,post和ajax方法的使用小结
  • 快速解决jquery之get缓存问题的最简单方法介绍
  • jQuery中get方法用法分析

这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。

先来看一个简单的实例

复制代码 代码如下:

<?php echo json_encode(array("name"=>$_POST['name']));?>

然后建立ajax.html文件,注意js代码:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./jquery-1.7.1.min.js"></script>
<script>
 $(document).ready(function(){
 $("#sub").click(function(){
  $.post("testPost.php",{name:$("#name").val()},function(data,textStatus){
  $("#result").append("data:"+data.name);
  $("#result").append("<br>textStatus:"+textStatus);
  },"json");
  return false;
 });
 });
</script>
</head>
<body>
<form action="testPost.php" method="post">
 <input type="text" name="name" id="name" >
 <input type="submit" id="sub" value="提交">
</form>
<h2>显示的内容如下:</h2>
<div id="result"></div>
</body>
</html>

用法2:(点击post数据返回数据)

<input type="button" id="bnajax" value="ajax" onclick="ajaxTest()" />
<script type="text/javascript" >
 function ajaxTest()
 {
 $.post("http://localhost:8012/t.asp", { "txt": "123" },function(data)
 {
  $("#divMsg").html(data);
 }
 );
 }
</script>

例3

JS代码:

<script>
$(document).ready(function(){
  $(".ajax_btn").click(function(){
   $.post("ajax.php",//异步处理动态页面
   {name:$(".name").val()},//获取类名为"name"文本的值,以NAME异步传值
   function(data){//data为反回值,function进行反回值处理
     $(".content").val(data);//获得得反回值后,将其填入到类名为"content"的文本框中
   });
  })
})
</script>

ajax.php代码:

<?php
$name=$_POST["name"];
if($name=="netxu"){
  echo "对不起,".$name."数据存在";
}
else{
  echo "恭喜你,".$name."可以使用";
}
?>

希望本文所述对大家jQuery程序设计有所帮助。

您可能感兴趣的文章:

  • jQuery中ajax - get() 方法实例详解
  • jquery中get,post和ajax方法的使用小结
  • jquery 读取页面load get post ajax 四种方式代码写法
  • jQuery中Ajax的get、post等方法详解
  • Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
  • jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
  • jQuery中ajax的get()方法用法实例
  • jQuery中ajax的load()方法用法实例
  • 详谈jQuery Ajax(load,post,get,ajax)的用法

本文由美高梅网址发布于计算机网络,转载请注明出处:函数读取页面的方法,方法实例详解

上一篇:html5实现拖拽上传,实现拖拽上传 下一篇:js中字符串编码函数escape美高梅网址,深入分析
猜你喜欢
热门排行
精彩图文