php jquery 局部页面刷新,jQuery页面刷新(局部、全部)问题分析_jquery

本文实例分两部分对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 + "

工作:" + 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 + "

工作:" + 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()刷新最顶端对象(用于多开窗口)

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

本文原创发布php中文网,转载请注明出处,感谢您的尊重!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现Ajax+PHP数据交互并局部刷新页面,需要以下步骤: 1. 创建一个包含HTML和PHP代码的页面,并在页面顶部引入jQuery库和一个自定义的JavaScript文件。 2. 在JavaScript文件中编写一个Ajax请求的代码,指定请求的URL和请求方法(POST或GET),并定义回调函数。 3. 在PHP文件中编写处理Ajax请求的代码,包括从请求中获取参数、查询数据库、将查询结果转换为JSON格式等。 4. 在回调函数中解析返回的JSON数据,并使用jQuery的DOM操作方法将数据插入到页面中指定的位置,实现局部刷新效果。 下面是一个简单的例子,演示如何使用Ajax和PHP实现查询结果的局部刷新: HTML/PHP页面代码: ```html <html> <head> <title>PHP查询结果局部刷新</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="ajax.js"></script> </head> <body> <h1>查询结果:</h1> <div id="result"></div> <form> <label>输入查询条件:</label> <input type="text" name="keyword" id="keyword"> <input type="button" value="查询" onclick="search()"> </form> </body> </html> ``` JavaScript文件代码(ajax.js): ```javascript function search() { var keyword = $("#keyword").val(); $.ajax({ url: "search.php", type: "POST", data: { keyword: keyword }, dataType: "json", success: function(result) { var html = ""; for (var i = 0; i < result.length; i++) { html += "<p>" + result[i].name + ":" + result[i].value + "</p>"; } $("#result").html(html); }, error: function(jqXHR, textStatus, errorThrown) { alert("查询失败:" + textStatus); } }); } ``` PHP文件代码(search.php): ```php <?php // 连接数据库 $servername = "localhost"; $username = "username"; $password = "password"; $dbname = "database"; $conn = new mysqli($servername, $username, $password, $dbname); if ($conn->connect_error) { die("连接失败:" . $conn->connect_error); } // 获取查询条件 $keyword = $_POST["keyword"]; // 查询数据库 $sql = "SELECT * FROM data WHERE name LIKE '%$keyword%'"; $result = $conn->query($sql); // 将查询结果转换为JSON格式 $data = array(); if ($result->num_rows > 0) { while ($row = $result->fetch_assoc()) { $data[] = array("name" => $row["name"], "value" => $row["value"]); } } echo json_encode($data); // 关闭数据库连接 $conn->close(); ?> ``` 在这个例子中,我们在页面中添加了一个输入框和一个查询按钮,用户输入查询条件后,点击查询按钮会触发JavaScript中的search()函数,该函数使用Ajax向search.php发送POST请求,将查询条件作为参数传递给PHP文件,PHP文件从数据库中查询符合条件的数据,并将查询结果转换为JSON格式返回给JavaScript,JavaScript解析JSON数据,并使用jQuery将查询结果插入到页面中指定的位置(id为result的div元素)实现局部刷新
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值