jQuery ajax get方法

最新推荐文章于 2022-04-04 18:11:49 发布

X W F

最新推荐文章于 2022-04-04 18:11:49 发布

阅读量139

点赞数 1

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_46399258/article/details/108446348

版权

jQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../jquery-3.5.1.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        font-size: 12px;
      }
      .comment {
        margin-top: 10px;
        padding: 10px;
        border: 1px solid #ccc;
        background: #ddd;
      }
      .comment h6 {
        font-weight: 700;
        font-size: 14px;
      }
      .para {
        margin-top: 5px;
        text-indent: 2em;
        background: #ddd;
      }
    </style>
  </head>
  <body>
    <form id="form1" action="#">
      <p>评论:</p>
      <p>姓名: <input type="text" name="username" id="username" /></p>
      <p>
        内容:
        <textarea name="content" id="content" rows="2" cols="20"></textarea>
      </p>
      <p><input type="button" id="send" value="提交" /></p>
    </form>
    <div class="comment">已有评论：</div>
    <div id="resText"></div>
    <script>
      $(function () {
        // 格式 : $("url",[data],[callback],[type])
        $("#send").click(() => {
          $.get(
            "get2.php",
            {
              username: $("#username").val(),
              content: $("#content").val(),
            },
            (data, textStatus) => {// 内容，请求状态
              let username = $(data).find("comment").attr("username"),
                content = $(data).find("comment content").text(),
                txtHtml = `
                          <div class="comment">
                            <h6>${username}</h6>
                            <p>${content}</p>
                          </div>
                          `;
              $("#resText").html(txtHtml); // 把返回的数据添加到页面上
            }
          );
        });
      });
    </script>
  </body>
</html>

X W F

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery ajax get方法

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="../jquery-3.5.1.mi
复制链接

扫一扫