jquery的Ajax使用

最新推荐文章于 2024-07-15 22:52:27 发布

satya1

最新推荐文章于 2024-07-15 22:52:27 发布

阅读量132

点赞数

本文链接：https://blog.csdn.net/weixin_41042671/article/details/79594440

版权

get

post

load

直接上代码

测试需要先express .生成一个项目 npm i 安装

public下新建个index.html来测试

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

  </head>
  <body>

    <div class="box">
    </div>

    <script type="text/javascript">
    //不刷新当前页的情况下去服务器端拿到东西
    // get数据不能太大，不能大于4kb
      $.get("/get_type",{group:"js"},function(res){
        console.log(res);
      })


      $.post("/get_json",{qinghua:"i love express!"},function(res){
        console.log(res);
        console.log(typeof res);//自动检查服务器端是什么格式。这里是json
      });

      // $.post("/get_json",{qinghua:"i love express!"},function(res){
      //   console.log(res);
      //   console.log(typeof res);//string
      // },"text");

      // load是对get的一个简化写法，不支持回调函数，
      // 需要作用在一个dom或才一堆dom对象上的。

      $(".box").load("/load_html");
    </script>

  </body>
</html>

app.js来响应

// app.use('/', index);
// app.use('/users', users);
app.post("/get_json",function(req,res){
  res.send({name:"wss",qq:"78678",qh:req.body.qinghua});
})

app.get("/get_type",function(req,res){
  res.send(req.query);
})

app.get('/load_html',function(req,res){
  res.send(`
    <h1>啊 大海 </h1>
    <p>我爱你在海</p>
    `);
})

再来一个文章创建的简单小例子

index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <style media="screen">
    .write {
      display: none;
      position: fixed;
      width: 300px;
      height: 240px;
      left: 50%;
      top: 50%;
      margin-left: -150px;
      margin-top: -110px;
      background-color: #eee;
      border: 2px solid #aaa;
    }
  </style>
</head>

<body>
  <nav>
    <a class="open-write-dialog" href="#"> write </a>
  </nav>
  <div class="article-list">

  </div>

  <div class="write">
    <p>
      <input type="text" name="title" value="" placeholder="请输入文章标题">
    </p>
    <p>
      <textarea name="content" style="width:290px;" rows="8" placeholder="请输入内容"></textarea>
    </p>
    <p>
      <button type="button" name="button"> 发布 </button>
    </p>
  </div>

  <script type="text/javascript">



    function generate_html(title, content) {
      return `
          <article>
            <h1>${title}</h1>
            <p>${content}</p>
          </article>`;
    }


    const writeDialog = $(".write");
    const titleInput = $(".write input[name=title]");
    const contentInput = $(".write textarea");
    const submitButton = $(".write button");
    const articleList = $(".article-list");

    const openWriteDialogButton = $(".open-write-dialog");

    $.get("/init_data",function (aritlces) {
      aritlces.forEach(article=>articleList.append(generate_html(article.title,article.content)));
    });

    openWriteDialogButton.click(function() {
      writeDialog.css({
        display: "block"
      });
    });

    submitButton.click(function() {
      // submit
      const title = titleInput.val();
      const content = contentInput.val();
      titleInput.val("");
      contentInput.val("");

      articleList.append(generate_html(title,content));

      $.post("/write", {
        title,
        content
      });
    });
  </script>
</body>

</html>

app.js

需要引入fs,util

var fs = require("fs");
var {promisify} = require("util");
var writeFile = promisify(fs.writeFile);
//把 fs写入 writeFile 的回调函数转化成 promise对象的一个工具

创建db.json用于存放数据

内容： []

const db = require("./db");

app.get("/init_data",function(req,res){
  res.send(db);
})

app.post("/write",async function(req,res){
  db.push(req.body);//未真实的写入文件db.json
  await writeFile(__dirname+"/db.json",JSON.stringify(db));//写入 返回的是promise 可以await
  res.send();
})