本文目录一览:
中使用php
我的理解是在js 中插入php语句,直接在要输出的地方?php php语句 ?,如果需要加‘’,就加上就ok了,不用js的拼接符号
js异步问题怎么解决
异步加载又叫非阻塞加载,浏览器在下载执行js的同时,还会继续进行后续页面的处理。主要有三种方式。
方法一:也叫Script DOM Element
(function(){
var scriptEle = document.createElement("script");
scriptEle.type = "text/javasctipt";
scriptEle.async = true;
scriptEle.src = "";
var x = document.getElementsByTagName("head")[0];
x.insertBefore(scriptEle, x.firstChild);
})();
async属性是HTML5中新增的异步支持。此方法被称为Script DOM Element 方法。Google Analytics 和 Google+ Badge 都使用了这种异步加载代码
(function(){;
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? '' : '') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
但是这种加载方式执行完之前会阻止onload事件的触发,而现在很多页面的代码都在onload时还执行额外的渲染工作,所以还是会阻塞部分页面的初始化处理。
方法二:onload时的异步加载
(function(){
if(window.attachEvent){
window.attachEvent("load", asyncLoad);
}else{
window.addEventListener("load", asyncLoad);
}
var asyncLoad = function(){
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? '' : '') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
}
)();
这种方法只是把插入script的方法放在一个函数里面,然后放在window的onload方法里面执行,这样就解决了阻塞onload事件触发的问题。
注:DOMContentLoaded与load的区别。前者是在document已经解析完成,页面中的dom元素可用,但是页面中的图片,视频,音频等资源未加载完,作用同jQuery中的ready事件;后者的区别在于页面所有资源全部加载完毕。
方法三:其他方法
由于JavaScript的动态性,还有很多异步加载方法: XHR Injection、 XHR Eval、 Script In Iframe、 Script defer属性、 document.write(script tag)。
XHR Injection(XHR 注入):通过XMLHttpRequest来获取javascript,然后创建一个script元素插入到DOM结构中。ajax请求成功后设置script.text为请求成功后返回的responseText。
//获取XMLHttpRequest对象,考虑兼容性。
var getXmlHttp = function(){
var obj;
if (window.XMLHttpRequest)
obj = new XMLHttpRequest();
else
obj = new ActiveXObject("Microsoft.XMLHTTP");
return obj;
};
//采用Http请求get方式;open()方法的第三个参数表示采用异步(true)还是同步(false)处理
var xmlHttp = getXmlHttp();
xmlHttp.open("GET", "", true);
xmlHttp.send();
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4 xmlHttp.status == 200){
var script = document.createElement("script");
script.text = xmlHttp.responseText;
document.getElementsByTagName("head")[0].appendChild(script);
}
}
XHR Eval:与XHR Injection对responseText的执行方式不同,直接把responseText放在eval()函数里面执行。
//获取XMLHttpRequest对象,考虑兼容性。
var getXmlHttp = function(){
var obj;
if (window.XMLHttpRequest)
obj = new XMLHttpRequest();
else
obj = new ActiveXObject("Microsoft.XMLHTTP");
return obj;
};
//采用Http请求get方式;open()方法的第三个参数表示采用异步(true)还是同步(false)处理
var xmlHttp = getXmlHttp();
xmlHttp.open("GET", "", true);
xmlHttp.send();
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4 xmlHttp.status == 200){
eval(xmlHttp.responseText);
//alert($);//可以弹出$,表明JS已经加载进来。click事件放在其它出会出问题,应该是还没加载进来
$("#btn1").click(function(){
alert($(this).text());
});
}
}
Script In Irame:在父窗口插入一个iframe元素,然后再iframe中执行加载JS的操作。
var insertJS = function(){alert(2)};
var iframe = document.createElement("iframe");
document.body.appendChild(iframe);
var doc = iframe.contentWindow.document;//获取iframe中的window要用contentWindow属性。
doc.open();
doc.write("scriptvar insertJS = function(){};\/scriptbody onload='insertJS()'/body");
doc.close();
GMail Mobile:业内JS内容被注释,所以不会执行,在需要的时候,获取script中的text内容去掉注释,调用eval()执行。
script type="text/javascript"
/*
var ...
*/
/script
HTML5新属性:async和defer属性
defer属性:IE4.0就出现。defer属声明脚本中将不会有document.write和dom修改。浏览器会并行下载其他有defer属性的script。而不会阻塞页面后续处理。注:所有的defer脚本必须保证按顺序执行的。
script type="text/javascript" defer/script
async属性:HTML5新属性。脚本将在下载后尽快执行,作用同defer,但是不能保证脚本按顺序执行。他们将在onload事件之前完成。
script type="text/javascript" defer/script
Firefox 3.6、Opera 10.5、IE 9和最新的Chrome和Safari都支持async属性。可以同时使用async和defer,这样IE 4之后的所有IE都支持异步加载。
没有async属性,script将立即获取(下载)并执行,期间阻塞了浏览器的后续处理。如果有async属性,那么script将被异步下载并执行,同时浏览器继续后续的处理。
总结: 对于支持HTML5的浏览器,实现JS的异步加载只需要在script元素中加上async属性,为了兼容老版本的IE还需加上defer属性;对于不支持HTML5的浏览器(IE可以用defer实现),可以采用以上几种方法实现。原理基本上都是向DOM中写入script或者通过eval函数执行JS代码,你可以把它放在匿名函数中执行,也可以在onload中执行,也可以通过XHR注入实现,也可以创建一个iframe元素,然后在iframe中执行插入JS代码。
php 异步上传图片几种方法总结
代码如下
form action="upload.php" id="form1" name="form1" enctype="multipart/form-data" method="post" target="uploadIframe" !--上传图片页面 -- /form iframe name="uploadIframe" id="uploadIframe" style="display:none"/iframe
然后后台处理完上传图片逻辑后返回给前台,利用ajax修改当前页面DOM对象实现无刷新上传图片的友好功能。
实例
代码如下
a.html form enctype="multipart/form-data" action="a.php" target="ifram_sign" method="POST" input name="submit" id="submit" value="" type="hidden" label上传文件: input name="test_file" type="file" id="test_file" size="48"/label input type="image" value="立即上传" id="submit_btn" /formiframe name="ifram_sign" src="" frameborder="0" height="0" width="0" marginheight="0" marginwidth="0"/iframe
php代码:
代码如下
?php
if ($_files["test_file"]["error"] 0)
{
echo "Error: " . $_files["test_file"]["error"] . "br /";
}
else
{
//这里的判断图片属性的方法就不写了。自己扩展一下。
$filetype=strrchr($_files["test_file"]["name"],".");
$filetype=substr($filetype,1,strlen($filetype));
$filename="img/".time("YmdHis").".".$filetype;
move_uploaded_file($_files["test_file"]["tmp_name"],$filename);
echo 'script alert(1)/script';
$return="parent.document.getElementByIdx_x('mpic".$pageset_id."').innerhtml='".$dataimgpath."'";
echo "script alert('上传成功')/script";
echo "script{$return}/script";
}
?
其实jquery ajax图片异步上传
html:
!DOCTYPE html PUBLIC "-//W3C//dtd Xhtml 1.0 transitional//EN"
""
html xmlns="" lang="en_US" xml:lang="en_US"
head
title图片异步上传/title
/head
script type="text/javascript" src="js/jquery.js"/script
script type="text/javascript" src="js/index.js"/script
link type="text/css" rel="stylesheet" href="css/index.css"
body
div class="frm"
form name="uploadFrom" id="uploadFrom" action="upload.php" method="post" target="tarframe" enctype="multipart/form-data"
input type="file" id="upload_file" name="upfile"
/form
iframe src="" width="0" height="0" style="display:none;" name="tarframe"/iframe
/div
div id="msg"
/div
/body
/html
index.js
$(function(){
$("#upload_file").change(function(){
$("#uploadFrom").submit();
});
});
function stopSend(str){
var im="img src='upload/images/"+str+"'";
$("#msg").append(im);
}
upload.php
?php
$file=$_files['upfile'];
$name=rand(0,500000).dechex(rand(0,10000)).".jpg";
move_uploaded_file($file['tmp_name'],"upload/images/".$name);
//调用iframe父窗口的js 函数
echo "scriptparent.stopSend('$name')/script";
?
异步上传图片几种方法
thinkphp 怎么异步加载
// 下面这行代码就是获得的属性
var id=$(this).attr("id");
var status=$(this).attr("rel");
if(status==0)
{
$.ajax({
url: "{:U('Test/operate1')}", //请求的url地址
dataType: "json", //返回格式为json
async: true, //请求是否异步,默认为异步,这也是ajax重要特性
data: { "id":id, "status":status}, //参数值
type: "POST", //请求方式
success: function(result) {$("#"+id).text("success");}, //请求成功时处理
error: function() {$("#"+id).text("fail");} //请求出错处理
});
}
else
{
$.ajax({
url: "{:U('Test/operate2')}", //请求的url地址
dataType: "json", //返回格式为json
async: true, //请求是否异步,默认为异步,这也是ajax重要特性
data: { "id":id, "status":status}, //参数值
type: "POST", //请求方式
success: function(result) {$("#"+id).text("success");}, //请求成功时处理
error: function() {$("#"+id).text("fail");} //请求出错处理
});
}
});
/script
相应的函数operate1与operate2的处理如下:
对传到的值进行相应的操作,返回值的操作为:$this-ajaxReturn($result,'JSON');
2.js异步加载中,rev={$vo['phone']}###{$vo['name']};用来传多个值,在另一个界面中通过explode来分隔数组,分别获得单个的值。
3.异步加载中不能出现echo等输出语句。
script 传数据到 php
要使用两个文件,一个是PHP文件,一个是写有js的HTML文件
JS:
location.href='a.php?a='+a;
PHP:
$a = $_GET['a'];
如果想在同一个页面完成可以使用iframe实现.
当然ajax也是一种解决方案