具有Bootstrap和Django的异步形式

具有Bootstrap和Django的异步形式

当我开始使用Django时，由于缺乏JS经验，我在AJAX上苦苦挣扎。

我将给您一个我用来添加选项和显示选项的aync表单的示例。

我的模板模式代码如下，它与呈现的表单（而不是我的惰性硬编码html）一样好用。

   <div  id="AddOptions" >  <div >    <button  data-dismiss="modal">X</button>    <h3>Add Options</h3>  </div>  <div ><form id="OptionForm" action="." method='POST'>  <div id="OptionValueError" >  <span ></span><br>  <br>Value&nbsp;<input type="text" name="OptionValue" id="id_OptionValue" /><br>Label&nbsp;<input type="text" name="OptionLabel" id="id_OptionLabel"/><input type="hidden" name="VariableID">  </div><div id="divid_OptionTable"><table  id="OptionTable"><thead>  <th>Value</th>  <th colspan="2">Label</th></thead><tbody></tbody></table></div></div>  <div >  <input type="submit"  value="Add">&nbsp;<button type="reset" >Reset</button></form>  </div></div>

接下来，请确保您拥有以下内容，以解决CSRF令牌问题。

<script type="text/javascript"> jQuery(document).ajaxSend(function(event, xhr, settings) {    function getcookie(name) {        var cookievalue = null;        if (document.cookie && document.cookie != '') { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) {     var cookie = jQuery.trim(cookies[i]);     // Does this cookie string begin with the name we want?     if (cookie.substring(0, name.length + 1) == (name + '=')) {         cookievalue = depreURIComponent(cookie.substring(name.length + 1));         break;     } }        }        return cookievalue;    }    function sameOrigin(url) {        // url could be relative or scheme relative or absolute        var host = document.location.host; // host + port        var protocol = document.location.protocol;        var sr_origin = '//' + host;        var origin = protocol + sr_origin;        // Allow absolute or scheme relative URLs to same origin        return (url == origin || url.slice(0, origin.length + 1) == origin + '/') || (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') || // or any other URL that isn't scheme relative or absolute i.e relative. !(/^(//|http:|https:).*/.test(url));    }    function safeMethod(method) {        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));    }    if (!safeMethod(settings.type) && sameOrigin(settings.url)) {        xhr.setRequestHeader("X-CSRFToken", getcookie('csrftoken'));    }});</script>

其次，这就是使用jQuery的基本AJAX
POST外观。请注意，这是基于防止表单存在于我们的模式中的默认提交行为。成功后，我会将新添加的值附加到表中。添加值作为捕获表单的一部分会比较麻烦，但是我想确保在将所有内容添加到表之前已保存并处理了所有内容。

   $(document).ready(function() {   $("#OptionForm").submit(function(event){       event.preventDefault();       $.ajax({ type:"POST", url:"{% url builder.views.addoption %}", data: {VariableID: $('input:hidden[name=VariableID]').val(), OptionLabel: $('input:text[name=OptionLabel]').val(), OptionValue: $('input:text[name=OptionValue]').val()}, success: function(data){ console.log(data['OptionID']); $("#OptionValueError").removeClass("error");   $("#OptionValueError span").text("");   $("#OptionValueError span").removeClass("error"); $('#OptionTable > tbody:last').append('<tr id=Option_'+data['OptionID']+'><td>'+data['OptionValue']+'</td><td>'+data['OptionLabel']+'</td><td><a href="#" onClick="deleteOption('+data['OptionID']+')"><i ></i></a>'); $('input:text[name=OptionValue]').val(''); $('input:text[name=OptionLabel]').val(''); }          });       });    });

最后，您只需要捕获此AJAX请求的视图，该视图看起来像是下面部分编写的那样。

def addoption(request):    if request.is_ajax():        OptionValue = int(request.POST['OptionValue'])        OptionLabel = request.POST['OptionLabel']        VariableID = int(request.POST['VariableID'])        getVar = Variable.objects.get(id=VariableID)        newOption = Option(VariableID=getVar,     Value=OptionValue,     Label=OptionLabel)        newOption.save()        response = {'OptionValue': OptionValue, 'OptionLabel': OptionLabel, 'OptionID': newOption.id}        json = simplejson.dumps(response)        return HttpResponse(json, mimetype="text/json")    else:        pass

我们将json序列化的响应指令是作为数据反馈并随后用于将值附加到表的内容。全部都无需重新加载主页。

希望该示例对您有所帮助。如果您还有其他问题，请告诉我。

京东