1. 只发送普通数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1 class="text-center">登陆</h1>
<div class="col-md-8 col-md-offset-2">
<div class="form-group">
<label for="id_username">用户名</label>
<input type="text" name="username" class="form-control" id="id_username">
</div>
<div class="form-group">
<label for="id_password">密码</label>
<input type="password" name="password" class="form-control" id="id_password">
</div>
<div class="form-group">
<label for="id_code">验证码</label>
<div class="row">
<div class="col-md-6">
<input type="text" name="code" class="form-control" id="id_code">
</div>
<div class="col-md-6">
<img src="/get_code/" alt="" height="35" width="350" id="id_img">
</div>
</div>
</div>
<input type="button" class="btn btn-primary" value="登录" id="id_login">
<span style="color:red" id="error"></span>
</div>
<script>
$('#id_login').click(function () {
$.ajax({
url: '',
type: 'post',
data: {
'username': $('#id_username').val(),
'password': $('#id_password').val(),
'csrfmiddlewaretoken': '{{ csrf_token }}',
'code': $('#id_code').val()
},
success: function (args) {
if (args.code == 1000) {
location.href = args.url
} else {
// 渲染错误信息，统一全部旋绕到提价按钮的下面
$('#error').text(args.msg)
}
}
})
});
</script>
</div>
</body>
</html>
2. 发送文件需要借助formData
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
{% load static %}
<link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
<script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
</head>
<body>
<div class="container">
<h1 class="text-center">注册</h1>
<div class="col-md-8 col-md-offset-2">
<!--form表单的形式提交-->
{# {% for form in form_obj %}#}
{# <div class="form-group">#}
{# <label for="{{ form.id_for_label }}">{{ form.label }}</label>#}
{# {{ form }}#}
{# <span style="color: red"></span>#}
{# </div>#}
{# {% endfor %}#}
<!--ajax形式提交-->
<form id="id_form">
{% csrf_token %}
{% for form in form_obj %}
<div class="form-group">
<label for="{{ form.id_for_label }}">{{ form.label }}</label>
{{ form }}
<span style="color: red" class="pull-right"></span>
</div>
{% endfor %}
<div class="form-group">
<label for="id_avatar">头像
<img src="{% static 'img/default.jpg' %}" alt="" height="100" style="margin-left: 20px" id="id_img">
</label>
<input type="file" name="myfile" id="id_avatar" style="display:none">
</div>
<input type="button" id="id_submit" class="btn btn-success pull-right" value="注册"> <!--不会触发form表单的提交动作-->
</form>
</div>
</div>
<script>
// 点击提交按钮，将注册信息发给后端
$('#id_submit').click(function () {
// 1 ajax发送文件 需要借助于内置对象formdata
var formData = new FormData();
// 2 添加普通键值对
$.each($('#id_form').serializeArray(), function (index, obj) {
formData.append(obj.name, obj.value)
});
// 3 添加文件
formData.append('avatar', $('#id_avatar')[0].files[0]);
// 4 发送ajax
$.ajax({
url: '',
type: 'post',
data: formData,
// 还需要额外指定两个参数
contentType: false,
processData: false,
success: function (args) {
if (args.code == 1000) {
// 跳转到登录页面 bom操作
location.href = args.url
} else {
$.each(args.msg, function (index, obj) {
// 拼接对应的input框的id值
var targetId = '#id_' + index;
// 找到对应的input框，将文本信息添加到该框下面的span标签中
$(targetId).next().text(obj[0]).parent().addClass('has-error') //
})
}
}
})
});
</script>
</body>
</html>