php的无刷新实现方法

方法一:

我们通过http的204状态码,页面不跳转。

1.html代码如下:

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <a href="./add.php">投票</a>
</body>
</html>

add.php代码如下:

<?php
$num = file_get_contents(‘./num.txt‘);
$num = intval($num) + 1;
file_put_contents(‘./num.txt‘, $num);

header(‘HTTP/1.1 204 No Content‘);

方法二:

利用图片加载的特性,来完成请求。

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="button" value="投票" id="addBtn" />
    <div id="request"></div>
</body>
<script type="">
    var addBtn = document.getElementById("addBtn");
    addBtn.onclick = function() {
        //创建img标签
        var img = document.createElement("img");

        //设置标签src属性
        img.setAttribute("src", "add.php");
        document.createElement("request").appendChild(img);
    };
</script>
</html>

方法三:

利用css,javascript的加载特性,完成请求,原理与img加载一样。

方法四:

利用iframe的特性

2.html代码如下:

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form action="ret.php" method="post" target="request">
        用户名:<input type="text" name="uname" value="" />
        密码:<input type="password" name="upwd" value="" />
        <input type="submit" name="submit" value="提交" />
    </form>
    <iframe width="0" height="0" frameborder="0" name="request"></iframe>
    <div id="result"></div>
</body>
</html>

ret.php代码如下:

<?php
$uname = !empty($_POST[‘uname‘]) ? $_POST[‘uname‘] : ‘‘;
$upwd = !empty($_POST[‘upwd‘]) ? $_POST[‘upwd‘] : ‘‘;

if($uname == ‘admin‘ && $upwd == ‘123456‘) {
    echo "<script>parent.document.getElementById(‘result‘).innerHTML=‘OK‘;</script>";
} else {
    echo "<script>parent.document.getElementById(‘result‘).innerHTML=‘NO‘;</script>";
}

我们通过设置form提交的target到iframe,使表单无跳转。

ajax能实现文件上传吗?

分析,文件上传,是需要客户端把文件内容发送到服务器,也就是XHR对象在POST数据时,把文件内容也发送给服务器。

也就是XHR对象能够获取你要上传的文件内容,但是出于安全的考虑,JS是无法获取本地文件内容的。

ajax插件是如何实现文件上传的?

1、iframe
2、flash实现,如swfupload
3、html5 (添加了文件读取api,使ajax上传文件成为可能。)
时间: 2024-10-06 14:28:16

php的无刷新实现方法的相关文章

jQuery实现form表单基于ajax无刷新提交方法详解

本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o

jquery 无刷新多级联动

原先不熟悉jquery时,总在寻找无刷新的方法,在此不断的积累自己所知道的jquery属性,常用方法.以下为jquery实现的无刷新联动事件 1 分公司: 2 <select id="SelectCom"> 3 <option value="">--请选择分公司-- </option> 4 </select> 5 电厂: 6 <select id="SelectORG"> 7 <o

Asp.Net 无刷新文件上传并显示进度条的实现方法及思路

相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来 实现呢?我并不否认"拿来主义",只是我个人更喜欢凡是求个所以然.本篇将阐述通过Html,IHttpHandler和 IHttpAsyncHandler实现文件上传和上传进度的原理,希望对你有多帮助. 效果图: 本文涉及到的知识点:1.前台用到Html,Ajax,JQuery,JQuery UI 2.后台用到一般处理程序(IHttpHandler)和

js实现无刷新表单提交文件,将ajax请求转换为form请求方法

最近在做项目的时候遇到一个需要上传文件的需求,因为ajax请求是无法上传二进制文件流的,所以只能用form表单提交,而form提交有一个问题就是会使页面刷新,本文解决了form表单提交文件时页面刷新的问题. 一.无刷新实现form提交文件 将form的target指向为一个iframe就可以实现无刷新提交文件了,但关键是还需要看到后台返回的数据,所以还需要为该iframe注册一个回调函数,因为iframe和该页面在同域内,所以可以在iframe里可以调用该回调函数,就可以看到后台返回的数据了.实

前台JS(Jquery)调用后台方法 无刷新级联菜单示例

前台用AJAX直接调用后台方法,老有人发帖提问,没事做个示例 下面是做的一个前台用JQUERY,AJAX调用后台方法做的无刷新级联菜单 http://www.dtan.so CasMenu.aspx页面: [html] view plaincopyprint? <%@ Page Language="C#" AutoEventWireup="true" CodeFile="CasMenu.aspx.cs" Inherits="_De

页面被iframe与无刷新更换url方法

页面被iframe问题解决方法 if (window.top.location !== window.self.location) { const data = JSON.stringify({ iframedRedirectSuccess: true }); window.top.location.href = addURLParam(window.self.location.href, 'data', data); } 页面初始化获取参数 import URL from 'url-parse

Ajax实现无刷新分页

注:本文中使用到的一些类库在前面文章都能找到源代码,我会在文中指明链接所在,为了缩短文章篇幅,由此带来的阅读不便,敬请谅解. 本文讲解 Ajax 实现无刷新分页.实现原理.代码展示.代码下载. 这里需要说明一些知识: 1.Ajax 无刷新页面的好处:提供良好的客户体验,通过 Ajax 在后台从数据库中取得数据并展示,取缔了等待加载页面而出现的空白状态: 2.那么,Ajax 无刷新页面是运行在动态页面(.PHP)?还是静态页面(.html/.htm/.shtml)?答案是:静态页面: 3.实现原理

无刷新删除 Ajax,JQuery

1.数据库用上面的,增加一个 DeleteById 的SQL方法delete from T_Posts where Id = @Original_Id 2.设置处理页面 delete.ashx public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string id = context.Request["id"]; //得到用户传过

移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传

现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片压缩,然后再把压缩后的图片上传到服务器. 一翻google之后,发现了localResizeIMG,它会对图片进行压缩成你指定宽度及质量度并转换成base64图片格式,那么我们就可以把这个base64通过ajax传到后台,再进行保存,先压缩后上传的目的就达到了. 处理过程 LocalResizeIM