jquery 取得选中多选项值并传递到PHP网页
PHP网页收到数据,根据所操作的结果返回参数或者值。
比如,删除成功返回什么,删除失败返回什么
弹出窗口引用 :http://layer.layui.com/
index.html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layer-更懂你的web弹窗解决方案</title>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<link rel="stylesheet" href="layui/css/layui_up.css" type="text/css"/>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script src="layer/layer.js"></script>
<script src="layui/layui.js"></script>
</head>
<body>
<input type="checkbox" name="checkbox" value="1"/>1
<input type="checkbox" name="checkbox" value="2"/>2
<input type="checkbox" name="checkbox" value="3"/>3
<input type="checkbox" name="checkbox" value="4"/>5
<input type="checkbox" name="checkbox" value="5"/>6
<div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>
<button id="testAjax" type="button">Ajax改变内容</button>
<script type="text/javascript">
$(function(){
//按钮单击时执行
$("#testAjax").click(function(){
//取得选中的多项值
var str="";
$("input[name='checkbox']:checkbox").each(function(){
if($(this).attr("checked")){
str += $(this).val()+","
}
})
//Ajax调用处理
var html = $.ajax({
type: "POST",
url: "index4.php",
data: "all_id="+str,//在php中data: "name=$tt&id=$id&content="+text,
async: false
}).responseText;
//成功后返回来的参数 弹出窗口
$("#myDiv").html('<h2>'+html+'</h2>');
layer.ready(function(){
layer.open({
type: 1,
title: '欢迎页',
area: ['420px', '240px'], //宽高
content: html,//返回的参数代码
btn: ['立即投资', '取消'],
shadeClose: true,
//回调函数
yes: function(index, layero){
self.location='http://www.baidu.com';//立即投资按钮
},
btn2: function(index, layero){
self.location='http://www.163.com';//取消按钮
},
cancel: function(index,layero){ //按右上角“X”按钮
self.location='http://www.qq.com';
},
});
setTimeout(function(){//两秒后跳转
location.href = "type.php";//PC网页式跳转
},2000);
});
});
});
</script>
</body>
</html>
index4.php代码
<?php
$msg1='所有ID'.$_POST['all_id'].'!';
//数据过程不列出
if(删除成功){
$msg="成功".$msg1;
echo $msg;
}else{//删除失败
$msg="失败".$msg1;
echo $msg;
}
?>