取得JS中的参数值并无刷新传线PHP文件，PHP文件取得值后处理返回结果

来源：互联网发布：steam mac 下载云存档编辑：程序博客网时间：2024/05/06 09:04

结合了弹出层组件layer

这个文件<script src="layer/layer.js"></script>在这里下载http://layer.layui.com/

<!DOCTYPE HTML>

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script src="layer/layer.js"></script>

</head>
<body>
<h2>取得JS中的参数值并无刷新传线PHP文件，PHP文件取得值后处理返回结果</h2><br>
<h2>弹出输入框，输入内容再提交到后台</h2>

<div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>


<button id="test2" class="button">运行上述例子</button>

<script>
//随机整数
var n1=Math.floor(Math.random()*10+1);//输出1～10之间的随机整数
var n2=parseInt(10*Math.random());//输出0～10之间的随机整数
//弹出一个页面层
$('#test2').on('click', function(){
layer.prompt({
title: '姓名：'+n1+"+"+n2+"=",
formType: 0 //prompt风格，支持0-2
}, function(pass){

var n3=n1+n2;
if(n3==pass){//判断填写的检证码是否正确

layer.prompt({title: pass+'随便写点啥，并确认', formType: 2}, function(text){
var html = $.ajax({
type: "POST",
url: "add.php",
data: 'name='+pass+'&age='+text,
async: false

}).responseText;
$("#myDiv").html('<h2>'+html+'</h2>');

layer.msg('演示完毕！您的姓名：'+ pass +' 您年龄：'+ text);
});
}
});
});
</script>
</body>
</html>

0 0