本文介绍了使用ajax提交表单,但获得“非法调用"的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我尝试通过ajax提交表单,下面是表单.
I try to submit form via ajax, below is the form.
<form class="form-vertical" method="POST" id="request-form" action="/post_handler?request=add_data" enctype="multipart/form-data">
<div class="form-group">
<label for="date_inp" class="control-label">Date</label>
<input class="form-control hasDatepicker" id="datepicker" type="text" name="date">
</div>
</div>
<div class="form-group">
<label for="file_inp">Upload File</label>
<div>
<input class="form-control" id="file_inp" type="file" placeholder="Upload File" name="file">
</div>
</div>
<div class="form-group">
<div>
<button type="submit" class="btn btn-default submit-button" onclick="on_click_form_submit(event);">Submit</button>
</div>
</div>
</form>
这是点击功能.
on_click_form_submit = function(event) {
event.preventDefault();
var form_data = new FormData($('#request-form')[0]),
form_url = '/' + $('#request-form')[0].action.split('/').pop();
console.log('url: ' + form_url);
$.ajax({
url: form_url,
type: 'POST',
data: form_data,
dataType: 'json',
encode: true
})
.done(function(response) {
alert(response);
})
.fail(function(xhr, status, error) {
alert(xhr.responseText);
});
return false;
};
当我单击提交"时,它会报告
When I click submit, it reports
Uncaught TypeError: Illegal invocation
at add (jquery-1.9.1.js:7340)
at buildParams (jquery-1.9.1.js:7392)
at Function.jQuery.param (jquery-1.9.1.js:7360)
at Function.ajax (jquery-1.9.1.js:7863)
at Object.on_click_form_submit (spa.shell.js:301)
推荐答案
根据文档,jQuery的$.ajax
接受:
Per the docs, jQuery's $.ajax
accepts:
因此,您的form_data
应该采用这些格式之一-不应是FormData
的实例化.这取决于您的后端期望什么,但是一种选择是将表单的值转换为使用serializeArray()
的对象:
So, your form_data
should be in one of those formats - it should not be an instantiation of a FormData
. It depends on what your backend is expecting, but one option would be to convert the form's values to an object with serializeArray()
:
on_click_form_submit = function(event) {
event.preventDefault();
var form_data = $('#request-form').serializeArray(),
form_url = '/' + $('#request-form')[0].action.split('/').pop();
console.log('url: ' + form_url);
$.ajax({
url: form_url,
type: 'POST',
data: form_data,
dataType: 'json',
encode: true
})
.done(function(response) {
alert(response);
})
.fail(function(xhr, status, error) {
alert(xhr.responseText);
});
return false;
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-vertical" method="POST" id="request-form" action="/post_handler?request=add_data" enctype="multipart/form-data">
<div class="form-group">
<label for="date_inp" class="control-label">Date</label>
<input class="form-control hasDatepicker" id="datepicker" type="text" name="date">
</div>
</div>
<div class="form-group">
<label for="file_inp">Upload File</label>
<div>
<input class="form-control" id="file_inp" type="file" placeholder="Upload File" name="file">
</div>
</div>
<div class="form-group">
<div>
<button type="submit" class="btn btn-default submit-button" onclick="on_click_form_submit(event);">Submit</button>
</div>
</div>
</form>
这篇关于使用ajax提交表单,但获得“非法调用"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!