<script type="text/javascript "src="js/jquery-3.7.0.js"></script> <script type="text/javascript"> $(document).ready(function() { //查询所有 $("#search").click(function(){ var username = $("#username").val(); var password = $("#password").val(); $.ajax({ url : "adduser", //请求url type : "POST", //请求类型 post|get data : { username : username, password : password }, dataType : "json", //返回数据的类型 text|json|html success : function(data){ if (data.result){ alert("add user success"); } } }); }); }); </script> UserName:<input type="text" id="username" /><br/> PassWord:<input type="text" id="password" /><br/> UserName:<input type="button" id="add" value="Add" />
时间: 2024-02-15 11:27:26 浏览: 143
这段代码是使用 jQuery 发送 AJAX 请求向服务器添加用户。当用户点击添加按钮时,代码会获取输入框中的用户名和密码,然后通过 AJAX 请求发送给服务器的 "adduser" 地址。服务器会解析请求中的参数,将用户信息存储到数据库中。如果添加成功,服务器会返回一个 JSON 格式的数据,客户端会解析这个数据并弹出提示框,提示用户添加成功。
相关问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微博发布功能</title> <style> *{margin:0; padding:0 } #weibo{ width: 600px; padding:10px; border: 1px solid #000; margin:100px auto 0; } #weibo textarea{ width: 455px; height: 165px; resize:none; vertical-align: bottom; } #weibo button{ width: 40px; height: 24px; vertical-align: bottom; } #weibo ul{ margin:20px 20px 20px 90px; } #weibo li{ line-height: 24px; list-style-type:none; border-bottom:1px dashed #ccc; word-break:break-all; /*自动换行*/ } </style> </head> <body> <div id="weibo"> 微博内容: <textarea></textarea> <button>发布</button> <ul> <li></li> </ul> </div> <script src="../jquery-3.7.0.js"></script> <script> $('button').click(function(){ // 1.拿到输入的内容 var res=$('textarea').val(); if(res!=''){ // console.log(res); // 2.创建孤儿元素 var oLi=$('<li>'+res+'</li>'); //3.添加元素 $('ul').prepend(oLi); //4.清空文本域 $('textarea').val(''); }else{ alert('请输入内容'); } }); </script> </body> </html>改进之后的代码
以下是改进后的代码,对用户输入内容进行了长度限制和敏感词汇过滤,添加了更友好的提示方式,并且使用原生 JavaScript 实现了相同的功能。
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>微博发布功能</title>
<style>
* {
margin: 0;
padding: 0;
}
#weibo {
width: 600px;
padding: 10px;
border: 1px solid #000;
margin: 100px auto 0;
}
#weibo textarea {
width: 455px;
height: 165px;
resize: none;
vertical-align: bottom;
}
#weibo button {
width: 40px;
height: 24px;
vertical-align: bottom;
}
#weibo ul {
margin: 20px 20px 20px 90px;
}
#weibo li {
line-height: 24px;
list-style-type: none;
border-bottom: 1px dashed #ccc;
word-break: break-all;
}
.error {
color: red;
font-size: 12px;
margin-top: 5px;
}
</style>
</head>
<body>
<div id="weibo">
微博内容:
<textarea id="content"></textarea>
<button id="submit">发布</button>
<ul id="weiboList">
<li></li>
</ul>
</div>
<script>
var content = document.getElementById('content');
var submit = document.getElementById('submit');
var weiboList = document.getElementById('weiboList');
submit.addEventListener('click', function () {
var res = content.value.trim();
if (res === '') {
showError('请输入内容');
return;
}
if (res.length > 140) {
showError('内容长度不能超过140个字符');
return;
}
if (isSensitive(res)) {
showError('内容包含敏感词汇');
return;
}
var oLi = document.createElement('li');
oLi.innerText = res;
weiboList.prepend(oLi);
content.value = '';
});
function showError(msg) {
var error = document.createElement('div');
error.className = 'error';
error.innerText = msg;
weibo.appendChild(error);
setTimeout(function () {
weibo.removeChild(error);
}, 2000);
}
function isSensitive(content) {
var sensitiveWords = ['敏感词汇1', '敏感词汇2', '敏感词汇3'];
for (var i = 0; i < sensitiveWords.length; i++) {
if (content.indexOf(sensitiveWords[i]) >= 0) {
return true;
}
}
return false;
}
</script>
</body>
</html>
```
改进后的代码对用户输入的内容进行了长度限制和敏感词汇过滤,并且添加了更友好的提示方式。使用原生 JavaScript 实现了相同的功能,避免了使用第三方库对页面加载速度的影响。
<script type="text/javascript "src="js/jquery-3.7.0.js"></script> <script type="text/javascript"> $(document).ready(function() { //查询所有 $("#search").click(function(){ var username = $("#username").val(); var password = $("#password").val(); $.ajax({ url : "adduser", //请求url type : "POST", //请求类型 post|get data : { username : username, password : password }, dataType : "json", //返回数据的类型 text|json|html success : function(data){ if (data.result){ alert("add user success"); } } }); }); }); </script> UserName:<input type="text" id="username" /><br/> PassWord:<input type="text" id="password" /><br/> UserName:<input type="button" id="add" value="Add" /> 对应的后端代码怎么写
根据前端代码,可以看出该 Ajax 请求的 URL 是 "adduser",请求方式是 POST,请求的数据包括用户名和密码。因此,后端代码应该是一个接受 POST 请求,处理参数为用户名和密码的函数。
在 Python 中,可以使用 Flask 框架来实现这个功能。具体的代码示例如下:
```python
from flask import Flask, request, jsonify
app = Flask(__name__)
@app.route('/adduser', methods=['POST'])
def add_user():
username = request.form.get('username')
password = request.form.get('password')
# 在这里进行添加用户的相关处理,例如存储到数据库中
return jsonify({'result': True})
if __name__ == '__main__':
app.run()
```
在这个例子中,我们使用 Flask 框架创建了一个 Web 服务器,然后定义了一个接受 POST 请求的路由 "/adduser"。在路由函数中,我们通过 request.form.get() 方法来获取前端传来的用户名和密码参数,然后可以在这个函数中进行添加用户的相关处理,例如存储到数据库中。最后,我们使用 jsonify() 方法将处理结果打包成 JSON 格式返回给前端。
阅读全文