Jquery Ajax 2

Jquery Ajax 2

后端index.js

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

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Jquery Ajax</title>
  8. </head>
  9. <body>
  10.     <button id="btn">加载HTML内容</button>
  11.     <a href="#">加载JSON</a>
  12.     <input type="button" value="加载JS">
  13.     <section></section>
  14.     <section></section>
  15.     <section></section>
  16.     <script src="js/jquery.js"></script>
  17.     <script src="js/index.js"></script>
  18. </body>
  19. </html>

info.html

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

index.js

  1. $('button').click(function(){
  2.     // load方法从服务器加载数据 并把返回的数据放入被选元素中
  3.     $('section').load('info.html')
  4. })
  5. $('a').click(function(){
  6.     $.getJSON('js/data.json',null,function(JSONDA){
  7.        alert(JSONDA.message)
  8.     })
  9. })
  10. $('input').click(function(){
  11.     $.getScript('js/script.js',function(res){
  12.         console.log(res)
  13.     })
  14. })

data.json

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

script.js

  1. alert('来自js的问候')
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇