場景:前端架構用layui, 送出的是textarea
頁面:
<form method="POST">
{% csrf_token %}
<div class="layui-form-item">
<div class="layui-col-md6 layui-col-xs-12">
<label class="layui-form-label">頁面位址</label>
<div class="layui-input-inline">
<textarea class="layui-textarea" name="urlstext" placeholder="請輸入位址(一行一條以http開頭)"></textarea>
<button class="layui-btn" lay-submit="" lay-filter="srh">立即送出</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
<div class="layui-col-md6 layui-col-xs-12">
<label class="layui-form-label">查詢結果</label>
<div class="layui-input-inline">
<textarea class="layui-textarea mg1em" name="res" id="resultstext">
</textarea>
</div>
</div>
</div>
</form>
javascript:
<script>
layui.use(['form', 'layer'], function () {
$ = layui.jquery;
var form = layui.form,layer = layui.layer;
var posting = false;
//監聽送出
form.on('submit(srh)', function (data) {
if (posting) return;
posting = true;
var loading = layer.load(1);
var form = $(this).closest("form");
$.ajax({
url: "query",
data: form.serialize(),
dataType: 'json',
method: 'POST',
success: function (res) {
var items = res.is_taken;
if (items) {
posting = false;
layer.close(loading);
$('#resultstext').val('');
for(var itemindex in items){
$('#resultstext').val($('#resultstext').val()+items[itemindex]+'\n');
}
} else {
posting = false;
layer.close(loading);
layer.msg("查詢失敗", { icon: 5 });
}
},
error: function () {
posting = false;
layer.close(loading);
layer.msg("查詢失敗", { icon: 5 });
}
});
return false;
});
});
</script>
服務端:
def query(request):
urls = results = []
res = request.POST.get("urlstext", "")
#處理邏輯......
data = { 'results': results }
return JsonResponse(data)