使用Jquery判断提交的表单数据是否重复
时间: 2023-09-22 10:06:43 浏览: 81
可以通过Jquery的ajax方法和后端接口进行交互,判断表单数据是否重复。具体实现步骤如下:
1. 给表单绑定submit事件,阻止表单默认提交行为。
```
$('form').submit(function(e){
e.preventDefault(); // 阻止表单默认提交行为
// 其他代码
});
```
2. 获取表单数据并发起ajax请求。
```
$('form').submit(function(e){
e.preventDefault(); // 阻止表单默认提交行为
var formData = $(this).serialize(); // 获取表单数据
$.ajax({
url: '/check_duplicate', // 后端接口地址
type: 'POST',
data: formData, // 表单数据
success: function(res){
if(res.code === 0){
// 表单数据重复
alert(res.msg);
} else {
// 表单数据不重复,提交表单
$('form')[0].submit();
}
},
error: function(err){
console.log(err);
}
});
});
```
3. 后端接口判断表单数据是否重复,并返回结果。
```
// 后端接口代码示例(Node.js+Express)
app.post('/check_duplicate', function(req, res){
var formData = req.body; // 获取表单数据
// 判断表单数据是否重复
if(formData.username === 'admin'){
res.json({code: 0, msg: '用户名已存在'}); // 表单数据重复
} else {
res.json({code: 1, msg: '表单数据不重复'}); // 表单数据不重复
}
});
```
以上是一种简单的实现方式,具体代码需要根据实际情况进行调整。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)