Php ajax 读id 传给模态框,ajax远程请求load到模态框的方法

很多时候，我们都需要，为了交互更友好，期望页面不做跳转，而是把远程的请求，load过来，在当前页面操作。这是考虑到交互的友好，另一方面，也可以让你们的后端业务以及前端js编写，适当减少解耦开，以免打开一个页面发现写一堆js，后端逻辑写一堆。看着很乱。

如以下这个图片，其实里面的注册他不是简单的一个弹框，把一些元素写在当前页面上，而是另一个页面被加载在当前地址这边进行弹出显示。虽然这个例子不是非常能体现，如果遇到load过来的这个页面，是有很多数据操作的时候，就知道便利了

做法如下：

1、疯转js，必须映入bootstrap，因为我们结合的是bootstrap的模态框

(function($){

//AJAX加载模板 success 成功时回调方法 error错误时回调方法

/* 使用方式

$.ajaxLoad(url,{},function(){

$('#alterModal').modal('show');

});

*/

$.ajaxLoad = function(url,data,success,error){

if(data && !$.isEmptyObject(data)){

method = 'post';

}else{

method = 'get';

}

$.ajax({

url:url,

data:data,

type:method,

success:function(result){

$("#alterModal").html(result);

$.isFunction(success) && success(result);

},

error:function(result){

$.isFunction(error) && error(result);

}

});

};

}($));

//事件绑定-模态框使用多次请求

$("#alterModal").on("hidden.bs.modal", function() {

$(this).removeData("bs.modal");

});

2、设置css样式

.alertModal-dialog-bg {

width: 60%;

margin: 50px auto 0px auto;

background-color: #fff;

border: 1px solid #999;

border: 1px solid rgba(0,0,0,0.2);

border-radius: 6px;

outline: 0;

-webkit-box-shadow: 0 3px 9px rgba(0,0,0,0.5);

box-shadow: 0 3px 9px rgba(0,0,0,0.5);

background-clip: padding-box;

padding: 20px;

}

.alertModal-dialog-sm{

width: 40%;

margin: 50px auto 0px auto;

background-color: #fff;

border: 1px solid #999;

border: 1px solid rgba(0,0,0,0.2);

border-radius: 6px;

outline: 0;

-webkit-box-shadow: 0 3px 9px rgba(0,0,0,0.5);

box-shadow: 0 3px 9px rgba(0,0,0,0.5);

background-clip: padding-box;

padding: 20px;

}

3、在某个公共调用页面预留一个块，如head是每个页面都会调用的

//请把中括号换成尖括号

[div id="alterModal" class="alertModalBox"][/div]

4、在一些页面需要去load远程另一个页面的时候调用js

$.ajaxLoad(url,{},function(){

$('#alterModal').modal('show');

})

5、远程请求的另一个页面模板

[div class="alertModal-dialog-bg"]

//请把中括号换成尖括号

//这里面的内容你可以按照自己的页面写

//但是必须用外层这个div包起来

[/div]

这样一个效果就实现了。多留意自己的一些业务过程，有一些过程，其实会很便利，只是你没有意识，就觉得没有什么特别。