1 点击按钮可以在form中添加input控件,以name给input编号,然后点击按钮ajax上传表单,在回调函数中弹框显示结果:
<form id="newfriends" action="{% url 'newfriends' %}">
<span>朋友姓名:</span>
<input name="{{ KEY_OF_FRIEND_NAME }}" type="text">
</form>
<button type="button" id="submit_newfriends">提交</button>
<button type="button" id="add_text_label">添加文字标签</button>
<button type="button" id="add_num_label">添加数值标签</button>
<script>
{# 除了名字外标签的个数#}
var num_text = 0;
var num_num = 0;
{# 添加文字标签#}
$('#add_text_label').click(function (e) {
$('#newfriends').append('<br><span>文字标签内容:</span><input name="'+num_text+'" type="text">');
num_text++;
});
{# 添加数值标签#}
$('#add_num_label').click(function (e) {
$('#newfriends').append('<br><span>数值标签名:</span><input name="title'+num_num+'" type="text"><span>数值标签内容:</span><input name="content'+num_num+'" type="number">');
num_num++;
});
$('#submit_newfriends').click(function (e) {
let f=$('#newfriends')[0];
console.log("f",f);
let formData=new FormData(f);
console.log("formData",formData);
$.ajax({
url:"{% url 'newfriends' %}",
type:"POST",
dataType:"json",
cache:false,
data:formData,
contentType:false,
processData:false,
success:function (data) {
$('#newfriends').innerHTML="hello!";
alert('yes');
},
error: function (res) {
alert('no');
}
})
})
</script>
因为是在127.0.0.1上调试的,所以不存在跨域问题,部署后还需要注意跨域问题。
注意,在后端给ajax返回结果的时候,应当用HttpResponse(),而不应该直接json.dumps,如下
错误:ajax将执行error定义的函数
正确:ajax将执行success定义的函数