Post Jobs

判断请求头中是否含有某属性来判断是否是ajax请求,html5颜色拾取器

*******php项目中当我们要对数据库进行写入操作时,有时会因为代码没有做防sql注入工作,导致各种不可预知的错误*******

HTML5、canvas颜色拾取器,html5颜色拾取器

 效果图:

图片 1

代码:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>canvas 颜色拾取器</title>
    <style>
        #canvas {
            border: 1px solid red;
        }
        #block {
            display: inline-block;
            width:50px;
            height: 50px;
            vertical-align: top;
            background-color: black;
        }
    </style>
</head>
<body>    
    <canvas id="canvas" width="400" height="400">你的浏览器不支持canvas</canvas>

    <script>
        //获取id 
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        //绘制填充颜色块 
        for(var i = 0; i < 16; i++) {
            for(var j = 0; j < 16; j++) {
                // gba(255,255,0) --->gba(255,0,0)
                ctx.fillStyle = "rgb("+(255 - j*16)+","+(255 - i*16)+",0)";
                ctx.fillRect(i*25,j*25,25,25);
            }
        }
        // 显示获取的颜色
        var block = document.getElementById("block");
        // 点击利用imgDate获取rgb值
        canvas.onclick = function(e) {
            var e = e || window.event;
            //e.layerX,e.layerY相对于绑定事件对象canvas的坐标
            var x = e.layerX;
            var y = e.layerY;
            // console.log(e);
            var imgData = ctx.getImageData(x,y,1,1);
            var r = imgData.data[0];
            var g = imgData.data[1];
            var b = imgData.data[2];

            block.style.backgroundColor = "rgb("+r+","+g+","+b+")";
        }
    </script>
</body>

</html>

 

 

效果图:
代码: ! doctype html html lang =”en” head meta charset =”UTF-8″ / title
canvas 颜色拾取器 / title style #…

复制代码 代码如下:

1,index.htm 这是一个很简单的注册页面l 我这是以ajax形式提交数据

<html>
<head>
<script language=”javascript”>

复制代码 代码如下:

function cl()
{
var xmlhttp;

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>RegisterForm</title>
<script type=”text/javascript”
src=’jquery-1.3.1.js’></script>
</head>
<body>
<h1>This is a test form! </h1>
<font color=”#8b0000″><table class=’tb’ border=”0″
cellpadding=”5″ cellspacing=0>
<form action=’_process.php’ method=’post’
enctype=’multipart/form-data’>
<tr><td class=”tdleft”><em>user
:</em></td><td><input type=’text’ id=’name’
name=’name’ value=” size=15/></td></tr>
<tr><td class=”tdleft”><em>ages :
</em></td><td><input type=’text’ id=’ages’
name=’ages’ value=” size=15/></td></tr>
<tr><td class=”tdleft”><em>pass :
</em></td><td><input type=’password’ id=’password’
name=’password’ value=” size=15/></td></tr>
<tr><td class=”tdleft”><em>addr :
</em></td><td><input type=’text’ id=’addr’
name=’addr’ value=” size=15/></td></tr>
<tr><td class=”tdleft”><em>email :
</em></td><td><input type=’text’ name=’email’
id=’email’ value=” size=15/></td></tr>
<tr><td class=”tdleft”><input type=’button’
value=’register’ id=”but”/></td><td><input
type=’reset’ value=’reseting’/></td></tr>
</form>
</table></font>
<span id=’msg’ style=’display:none’>正在加载… …</span>
<p id=”result” class=””></p>
<style type=”text/css”>
body{text-align:center;}
.error{color:red;}
.tb{margin:0 auto;width:350px;height:200px;text-align:center;}
.tdleft{width:150px;text-align:left;}
</style>
<script type=’text/javascript’>
$(“#but”).click(function(){
var name = $.trim($(“#name”).val());
var ages = $.trim($(“#ages”).val());
var pn = /^\d+$/;
var addr = $.trim($(“#addr”).val());
var pass = $.trim($(“#password”).val());
var email = $.trim($(“#email”).val());
var reg =
/^[a-zA-Z0-9_][email protected][a-zA-Z0-9_]+(\.[a-zA-Z]+)+$/gi;
if(name.length==0){
alert(“请认真填写姓名!”);return false;
}
if(ages.length==0){
alert(“请填写年龄!”);return false;
}
if(!pn.test(ages)){
alert(“请填写有效数字!”);return false;
}
if(pass.length==0||pass.length>6){
alert(“请认真填写密码!”);return false;
}
if(addr.length==0){
alert(“请认真填写地址!”);return false;
}
if(email.length==0){
alert(“请认真填写邮件!”);return false;
}
if(!reg.test(email)){
alert(“电子邮件检测失败”);return false;
}
var send =
{‘name’:name,’ages’:ages,’pass’:pass,’addr’:addr,’email’:email};
$.post(‘_process.php’,send,function(data){
if(data.res==-1){
$(“#result”).addClass(“error”);
}
$(“#result”).html(data.msg);
//$(“form”)[0].reset();
},’json’);
})
$(“#msg”).ajaxStart(function(){
$(this).fadeIn();
}).ajaxStop(function(){
$(this).fadeOut();
})
</script>
</body>
</html>

if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}

2,_process.php接收ajax提交数据 并做相关处理的文件

xmlhttp.open(“POST”,”ajax2.html”,true);
xmlhttp.setRequestHeader (“Content-Type”,”application/x-
www-form-urlencoded”);
//jquery
YUI默认会发送一个含有HTTP_X_REQUESTED_WITH的HTTP请求头消息,因此,可以通过判断请求头中是否含有该属性来判断是否时ajax请求
xmlhttp.setRequestHeader(‘HTTP_X_REQUESTED_WITH’,
‘HTTP_X_REQUESTED_WITH’);
xmlhttp.send();

复制代码 代码如下:

xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
alert(xmlhttp.responseText);
}
}
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图