ajax html thinkphp,thinkPHP5.1+jQuery+ajax实现搜索，用append展示ajax返回数据的完整实现...

兑换码

$(function () {

//查询CDK兑换信息

$('#form1').submit(function () {

$.ajax({

url:"http://www.huafen.cn/supplier/key/product",

type:"post",

cache:false,//上传文件不需要缓存

dataType:'json',

data:$("#form1").serialize(),

success:function (data) {

console.log(data)

if (data.data) {

var html='';

html = html+'

\n' +

'       

\n' +

'           

客户信息

\n' +

'           

\n' +

                            '               

'+data.data.user.nickname+'\n' +

'           

\n' +

'           

手机号码：'+data.data.user.phone+'

\n' +

'           

性别：'+data.data.user.sex+'

\n' +

'           

常住地：'+data.data.user.residence+'

\n' +

'       

\n' +

'       

\n' +

'           

兑换信息

\n' +

'           

\n' +

'               

\n' +

                            '                    \n' +

'               

\n' +

'               

\n' +

'                   

'+data.data.product.name+'

\n' +

'                   

'+data.data.product.content+'

\n' +

'               

\n' +

'           

\n' +

'            \n' +

'       

\n' +

'   

';

$("#content").html(html);

} else {

$("#content").append(112434);

}

return false;

},error:function (data) {

alert("请求失败aa");

return false;

}

});

return false;

});

//2.用户兑换

$('.change').click(function () {

$.ajax({

url:"http://www.huafen.cn/user/front_user/change_cdkey",

type:"post",

cache:false,//上传文件不需要缓存

dataType:'json',

data:$("#form1").serialize(),

success:function (data,status,xhr) {

if (data == 'ok') {

alert('登录成功！');

window.location.href="http://www.huafen.cn/supplier/key/cdkey";

}

if (data == 'error') {

alert("账号或密码错误！");

}

},error:function (data) {

alert("请求失败");

return false;

}

});

return false;

})

})

*{

padding: 0px;margin: 0px;background: url('BJ.png') no-repeat;

}

#a{

width: 650px;height: 600px;background: #ffffff;border-radius: 10px;

position:absolute;left:0;top: 0;bottom: 0;right: 0;margin: auto;text-align: center;

}

#content{

background: white;}

.user_info{

margin-bottom: 5px;background: white;height: 178px;width: 95%;padding-top: 20px;text-align: left;

border-bottom: 0.6px solid rgba(200, 200, 200, 0.43);

}

.title{

font-size: 20px;line-height: 32px;color: #000000;text-align: left;background: white;

}

.user_info .title{

font-size: 20px;line-height: 32px;color: #000000;margin-bottom: 5px;background: white;

}

.user_info p:not(first-child){

font-size: 14px;color: #000000;height: 24px;background: white;

}

.header{

display: inline-flex;flex-direction: row;align-items:center;margin-top: 10px;background: white;

}

.header span{

font-size: 18px;background: white;color: #010101;

}

.head_img{

width: 60px;height: 60px;border-radius: 100%;margin-right: 5px;

}

.head_img img{

width: 100%;height: 100%;border-radius: 100%;

}

.key_body{

margin: 0 auto;width: 512px;text-align: center;background: white;

display: block;

}

.key_form{

display: inline-flex;width: 512px; margin: 36px 0 10px 0;box-shadow: 0px 3px 7px 0px rgba(208, 208, 208, 0.55);

}

.key{

width: 95%;height: 48px;border-radius: 4px 0 0 4px;padding-left: 5%;outline: none;border: none;background: #fcfcfc;

}

.key_sub{

width: 72px;height: 48px;background: #1a98ff;border-radius: 0px 4px 4px 0px;outline: none;border: none;font-size: 20px;letter-spacing: 0px;color: #ffffff;cursor: pointer;

}

.product{

width: 100%;margin-top: 15px;background: white;

}

.change{

width: 250px;height: 60px;background: #1a98ff;border-radius: 30px;outline: none;text-align: center;border: none;font-size: 20px; line-height: 64px;color: #fcfcfc; letter-spacing: 0px;cursor: pointer;

}

.cdkey{

font-size: 20px;width:90%;height: 90px;;background: #ffffff;box-shadow: 0px 3px 7px 0px rgba(208, 208, 208, 0.55);border-radius: 10px;

margin: 10px 0 20px 0;padding: 5%;display: flex;

}

.cdkey .img{

width: 132px;height: 100%;

}

.cdkey .img img{

width: 100%;height: 100%;

}

.p_msg{background: white;text-align: left;height: 100%;padding-left: 10px;flex-basis: auto;}

.p_name{font-size: 16px;color: #000000;background: white;}

.p_content{font-size: 14px;color: #7a7979;background: white;margin-top: 5px;}

PHP代码

public function cdkey(){

/* $cdkey =input("post.cdkey");

dump($cdkey);

$msg = get_curl('user','front_user/change_cdkey_select',['cdkey'=>$cdkey]);

if ($msg['status']=='true'){

$data = $msg;

}else{

$data = 0;

}

dump($msg);

//        $this->assign('product',$data);

echo $data;*/

return $this -> view -> fetch('cdkey');

}

public function product(){

$cdkey =input("post.cdkey");

$msg = get_curl('user','front_user/change_cdkey_select',['cdkey'=>$cdkey]);

if ($msg['status']=='true'){

$data = $msg;

}else{

$data = 0;

}

return json($data);

}