<!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>