Jquery Ajax 2 - 会coding的HAM

BG7ZAG

|

2017-8-10 21:55

|

1,457

|

0

|

351 字

|

2 分钟

Jquery Ajax 2

后端index.js

const exp = require('express')
app = exp()
app.use(exp.static('static'))
app.listen(3000,()=>{
console.log('服务器运行了')
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Jquery Ajax</title>
</head>
<body>
<button id="btn">加载HTML内容</button>
<a href="#">加载JSON</a>
<input type="button" value="加载JS">
<section></section>
<section></section>
<section></section>
<script src="js/jquery.js"></script>
<script src="js/index.js"></script>
</body>
</html>

info.html

<h1>这里的内容是通过Ajax加载的</h1>
<p>
这种方式需要服务端把数据拼成HTML 目前使用较少
现在流行的是服务端直接返回json数据
由浏览器中的js 完成html的拼装原因有两个<br>
1 服务端不再拼html 压力会小一点<br>
2 js可以通过模板化很方便的将json转换成html
</p>

index.js

$('button').click(function(){
// load方法从服务器加载数据并把返回的数据放入被选元素中
$('section').load('info.html')
})
$('a').click(function(){
$.getJSON('js/data.json',null,function(JSONDA){
alert(JSONDA.message)
})
})
$('input').click(function(){
$.getScript('js/script.js',function(res){
console.log(res)
})
})

data.json

{
"status":"success",
"message":"服务端直接返回JSON文件\n服务端接口没有开发时可以直接返回json文件模拟请求结果"
}

script.js

alert('来自js的问候')

Ajax jQuery

暂无评论

发送评论编辑评论

Markdown

悄悄话

邮件提醒

|´・ω・)ノ

ヾ(≧∇≦*)ゝ

(☆ω☆)

（╯‵□′）╯︵┴─┴

￣﹃￣

(/ω＼)

∠( ᐛ 」∠)＿

(๑•̀ㅁ•́ฅ)

→_→

୧(๑•̀⌄•́๑)૭

٩(ˊᗜˋ*)و

(ノ°ο°)ノ

(´இ皿இ｀)

⌇●﹏●⌇

(ฅ´ω`ฅ)

(╯°A°)╯︵○○○

φ(￣∇￣o)

ヾ(´･･｀｡)ノ"

( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃

(ó﹏ò｡)

Σ(っ °Д °;)っ

( ,,´･ω･)ﾉ"(´っω･｀｡)

╮(╯▽╰)╭

o(*////▽////*)q

＞﹏＜

( ๑´•ω•) "(ㆆᴗㆆ)

颜文字

Emoji

小恐龙

花!