jQuery页面刷新(局部、全部)问题分析


Posted in Javascript onJanuary 09, 2016

本文实例分两部分对jquery刷新问题进行介绍,第一部分介绍了呢页面局部刷新;第二部分介绍了页面全部刷新
第一:页面局部刷新

jQuery对Ajax操作进行了封装,在jQuery中$.ajax()方法属于最底层的方法,第2层是laod()、$.get()和$.post()方法,第3层是$.getScript()和$.getJSON()方法。
重点分析load()方法通常用来从Web服务器上获取静态的数据文件.要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()方法$.ajax方法

load() Code 
//无参数传递,则是GET方式
$("#resText").load("test.php",function(){
//......
});

//有参数传递,则是POST方式
$("#resText").load("test.php",{name:"xht555",age:"24"},function(){
//......
});

简单说一下 post 与get 区别:

get:用get方式可传送简单数据(即:浏览器将各个表单字段元素及其数据按照URL参数的格式附加在url后面),但大小一般限制在1KB下;被客户端的浏览器缓存起来,不安全。

post:览器把各表单字段元素及其数据作为HTTP消息的实体内容发送给Web服务器,而不是作为URL地址的参数进行传递,

总结:

一:GET方式传送数据量小,处理效率高,安全性低,会被缓存,而POST反之。 

二:AJAX乱码问题
产生乱码的原因:
1、xtmlhttp 返回的数据默认的字符编码是utf-8,如果客户端页面是gb2312或者其它编码数据就会产生乱码
2、post方法提交数据默认的字符编码是utf-8,如果服务器端是gb2312或其他编码数据就会产生乱码

解决办法有:
1、若客户端是gb2312编码,则在服务器指定输出流编码

2、服务器端和客户端都使用utf-8编码

gb2312:header('Content-Type:text/html;charset=GB2312');

utf8:header('Content-Type:text/html;charset=utf-8');

注 意:如果你已经按上面的方法做了,还是返回乱码的话,检查你的方式是否为get,对于get请求(或凡涉及到url传递参数的),被传递的参数都要先经 encodeURIComponent方法处理.如果没有用encodeURIComponent处理的话,也会产生乱码 

$.post() Code 

//$.post()方式:
$('#test_post').click(function (){
  $.post(
   'ajax_json.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() Code 
//$.get()方式:
$('#test_get').click(function ()
{
  $.get(
   'ajax_json.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']);
   }
  );
});


});

$.getJson(”Default.php”, {id:”1″, page: “2″ },
function(data){
//注意,这里返回的JSON数据格式,不同于xml.
});

第二:页面全部刷新

  • 1 window.location.reload()刷新当前页面.
  • 2 parent.location.reload()刷新父亲对象(用于框架)
  • 3 opener.location.reload()刷新父窗口对象(用于单开窗口)
  • 4 top.location.reload()刷新最顶端对象(用于多开窗口)

以上就是本文的详细内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JSQL SQLProxy 的 php 版本代码
May 05 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
Jan 15 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
Sep 19 Javascript
如何使用jquery动态加载js,css文件实现代码
Apr 03 Javascript
父页面显示遮罩层弹出半透明状态的dialog
Mar 04 Javascript
Javascript实现div的toggle效果实例分析
Jun 09 Javascript
js判断手机号运营商的方法
Oct 23 Javascript
详解js跨域原理以及2种解决方案
Dec 09 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
May 30 Javascript
微信小程序复选框实现多选一功能过程解析
Feb 14 Javascript
JS创建自定义对象的六种方法总结
Dec 15 Javascript
javascript实现计算器功能详解流程
Nov 01 Javascript
javascript返回顶部的按钮实现方法
Jan 09 #Javascript
javascript类型系统 Array对象学习笔记
Jan 09 #Javascript
JS中生成随机数的用法及相关函数
Jan 09 #Javascript
JavaScript电子时钟倒计时
Jan 09 #Javascript
bootstrap-treeview自定义双击事件实现方法
Jan 09 #Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
Jan 08 #Javascript
学习JavaScript设计模式之状态模式
Jan 08 #Javascript
You might like
php实现在线生成条形码示例分享(条形码生成器)
2013/12/30 PHP
一个简单安全的PHP验证码类 附调用方法
2016/06/24 PHP
php+jQuery递归调用POST循环请求示例
2016/10/14 PHP
php5.6.x到php7.0.x特性小结
2019/08/17 PHP
关于js中for in的缺陷浅析
2013/12/02 Javascript
js、jquery图片动画、动态切换示例代码
2014/06/03 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
2015/04/17 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
使用 NodeJS+Express 开发服务端的简单介绍
2017/04/07 NodeJs
bootstrap multiselect 多选功能实现方法
2017/06/05 Javascript
AngularJS实现单一页面内设置跳转路由的方法
2017/06/28 Javascript
jQuery中DOM操作原则实例分析
2019/08/01 jQuery
解决layui checkbox 提交多个值的问题
2019/09/02 Javascript
Python入门篇之字符串
2014/10/17 Python
Python实现对百度云的文件上传(实例讲解)
2017/10/21 Python
Python单元测试工具doctest和unittest使用解析
2019/09/02 Python
余弦相似性计算及python代码实现过程解析
2019/09/18 Python
Python 类属性与实例属性,类对象与实例对象用法分析
2019/09/20 Python
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
2018/02/01 HTML / CSS
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
2017/02/06 HTML / CSS
牵手50香港:专为黄金岁月的单身人士而设的交友网站
2020/08/14 全球购物
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
初中生学习生活的自我评价
2013/11/20 职场文书
《小池塘》教学反思
2014/02/28 职场文书
煤矿安全承诺书
2014/05/22 职场文书
研究生简历自我评价范文
2014/09/13 职场文书
2014年优质护理服务工作总结
2014/11/14 职场文书
党员先进事迹材料
2014/12/19 职场文书
教师求职自荐信
2015/03/26 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书
奖学金申请书(范文)
2019/08/14 职场文书
如何在Mac上通过docker配置PHP开发环境
2021/05/29 PHP