Jquery Ajax 2

黄良钵

分类: 程序开发 734 0

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的问候')
  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
Ajax、jQuery

作者简介: 黄良钵

打赏

博客站长,前端开发工程师

共 0 条评论关于 “Jquery Ajax 2”

Loading...