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