结合了弹出层组件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>