PHP/Ajax

<?php
    echo '<div>Hello World!</div>';   //向页面中输入字符串
?>
定义变量与输出  字符串拼接用点.
$num = 123;
echo '<div>'.$num.'</div>';
php单引号对于其中的变量当做普通的字符串''
双引号对于其中的变量会解析成变量值""
数组:
$arr = array(1,2,3,4,5);
print_r($arr);
echo $arr[0];
二维数组:
$arr = array();
$arr[0] = array(1,2,3);
$arr[1] = array(4,5,6);
$arr[2] = array(7,8,9);
数据类型:
字符串、整型、浮点型、布尔型、数组、对象、NULL
定义函数: 变量要加$符号
function foo($info) {
	return $info;
}

$ret = foo('hi');
echo $ret;
系统函数
$arr = array("a"=>"111","b"=>"222","c"=>"333");
$ret = json_encode($arr);
echo $ret
输出:{"a":"111","b":"222","c":"333"}
php中函数名字不区分大小写
预定义变量:
$_GET
$_POST
http://localhost/index.php?abc=1
$f = $_GET['abc'];
echo $f; 
通过GET方式获取abc对应的值
http协议常用的请求方法:
get用来从服务器获取数据
post用来添加数据
put用来修改数据
delete用来删除数据
form表单默认是get请求,会把表单数据作为Url参数
设置成post
<form action="controller.php" method="post">
	用户名:<input type="text" name="username"></br>
	密码: <input type="password" name="password"></br>
	<input type="submit" value="登录">
</form>
后台
<?php 
	$uname = $_POST['username'];
	$pwd = $_POST['password'];

	header("Content-Type:text/plain;charset=utf-8");
	$arr = array("username"=>"zhangsan","score"=>"200");
	echo '登录成功';
	echo "$arr[username]"
 ?>
$arr = array();
$arr[0] = array("name"=>"三国演义","author"=>"罗贯中","category"=>"古典文学","desc"=>"一个封建王朝的缩影");
$arr[1] = array("name"=>"水浒传","author"=>"施耐庵","category"=>"古典文学","desc"=>"好汉故事");
$arr[2] = array("name"=>"西游记","author"=>"吴承恩","category"=>"古典文学","desc"=>"师徒四人取经");

<?php foreach ($arr as $value) {?>
    <?php echo $value["name"]; ?>
    <?php echo $value["author"]; ?>
    <?php echo $value["category"]; ?>
    <?php echo $value["desc"]; ?>
<?php } ?>
AJAX
btn.onclick = function() {
	var username = document.getElementById("username").value;
	var password = document.getElementById("password").value;
	//1、创建XMLHttpRequest()对象;
	var xhr = new XMLHttpRequest();
	//2、准备发送
	xhr.open('get','./controller.php?username='+username+'&password='+password,true);
	//3、执行发送动作
	xhr.send(null);
	//4、指定回调函数
	xhr.onreadystatechange = function() {
		if(xhr.readyState == 4) {  //得到数据
			if(xhr.status == 200) {
				var data = xhr.responseText;
				if(data == '1') {
					info.innerText = '登录成功';
				} else {
					info.innerText = '登录成功';
				}
			}
		}
	}
}
STEP1  创建xhr对象
var xhr = new XMLHttpRequest();
STEP2  
准备发送,参数1:请求方式 参数2:请求地址 参数3:同步或者异步,true是异步
get请求对中文需要编码,防止乱码出现
var param =......
xhr.open('get','xxx.php?'+encodeURI(param),true);
STEP3发送
xhr.send(null);
STEP4指定回调函数
xhr.onreadystatechange = function(){}
STEP1  创建xhr对象
var xhr = new XMLHttpRequest();
STEP2  
准备发送,参数1:请求方式 参数2:请求地址 参数3:同步或者异步,true是异步
var param = "username" + username + "&password =" +pw;
xhr.open('post','xxx.php',true);
STEP3发送
xhr.setRequestHeader("Content-Type","application/x-www.form-urlencoded");
xhr.send(param);
STEP4指定回调函数
xhr.onreadystatechange = function(){}
响应状态分析:
xhr.readyState   2浏览器已经收到数据  3正在解析数据   4解析完成
回调函数是浏览器调用的,当状态发生变化会被调用,一共调用3次。
xhr.status       200表示响应成功 404没有找到资源  500内部服务器错误
JSON JavaScript Object Notation
json中的键必须用双引号标注
var data = xhr.responseText;
JSON.parse(data)   字符串转json
JSON.stringify(obj)  json对象转字符串
eval("("+data+")");  生效代码 很危险
js中是单线程+事件队列的结构
达成异步的效果。
JQuery AJAX
$(function() {
	$("#btn").on('click',function() {
		var uname = $("#username").val();
		var pwd = $("#password").val();

		$.ajax({
			"type" : "get",
			"url" : "./controller.php?username="+uname+"&password="+pwd,
			"datatype" : "json",  //xml json text html script jsonp
			success : function(data) {
				if (data == 1) {
					$("#info").text("登录成功");
				} else {
					$("#info").text("登录失败");
				}
			}
		});
	});
});
POST方式
$(function() {
	$("#btn").on('click',function() {
		var uname = $("#username").val();
		var pwd = $("#password").val();

		$.ajax({
			type : "post",
			url : "./controller.php",
			datatype : "json",  //xml json text html script jsonp
			data : {"username":uname,"password":pwd},
			success : function(info) {
				// console.log(info);
				if (info == 1) {
					$("#info").text("登录成功");
				} else {
					$("#info").text("登录失败");
				}
			},
			error : function(e){
            	console.log(e.status);
            	console.log(e.responseText);
        	}
		});
	});
});
跨域问题:
同源策略,请求的地址协议、域名、端口都相同才可以访问。
解决跨域问题的方法:
jsonp
document.domain + iframe
location.hash + iframe
window.name + iframe
window.postMessage  //兼容性有问题
jsonp跨域原理分析
静态script标签:
script标签是可以跨域的,可以跨域获取数据
<script type="text/javascript" src="跨域地址.php"></script>
但是无法获取到,通常返回的是一段js代码 echo 'var data = 123';
这样在前端便能够通过访问变量来获取数据
$arr = array("username"=>"zhangsan","password"=>"123456");
echo 'var data='.json_encode($array);
前端通过 data.username便能够得到数据
<script async type="text/javascript" src="跨域地址.php"></script>异步,
是访问不到数据的
<script type="text/javascript" src="跨域地址.php"></script>  同步,能够获取到
动态script标签,不涉及顺序问题,动态创建script标签
var script = document.createElement("script");
script.src = "./controller.php";
var head = document.getElementsByTagName("head")[0];
head.appendChild(script);

function foo(arg1){
	console.log(arg1);
}
动态生成script发送的请求是异步的请求,并不能得到数据,不能修改
解决方法是返回一个函数调用:
<?php 
	echo 'foo(6)'
 ?>
这样控制台便会打印数字 6
服务器响应的内容 echo '这里其实就是js代码'
前后端函数名字需要一致,解决方法:
前端src中url地址拼接一个callback=abc,这样后台就知道函数名是abc了
dataType:'jsonp',
JQuery中jsonp默认返回走的是error方法,而不进入success
可以通过回调函数的方法修改
<?php 
        $cb = $_GET['callback'];
	echo $cb.'('.'"hello"'.')';
 ?>
回调函数走的是success
jsonp:'cb',将回调函数名字命名为cb    calllback=abc 改的是前面的值
jsonpCallback:'abc'  改的是后面的值   回调函数的名字

发表评论

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