emo前端

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定义的函数