Exemple de code de soumission de formulaire Ajax et de téléchargement de fichier

J'ai découvert un petit problème alors que je travaillais sur un programme il y a quelque temps. Lorsque j'écrivais le Formulaire de gestion d'arrière-plan pour télécharger des images, lorsque je l'ai soumis en utilisant le Formulaire formulaire, il a sauté et l'a soumis. La page qui renvoie la valeur et la page d'origine est actualisée Ci-dessous, l'éditeur partagera avec vous l'exemple de code de soumission Ajax Formulaire et téléchargement de fichier. pour analyser

il y a quelques jours, j'ai trouvé quelques problèmes mineurs. Lorsque j'écrivais la page de gestion de l'arrière-plan, j'avais besoin de télécharger une photo. J'ai donc utilisé un formulaire très courant pour télécharger une chaîne Json et des fichiers image ;

Formulaire pour télécharger des images, il vous suffit d'ajouter enctype = 'multipart/form-data' dans la balise ff9c23ada1bcecdd1a0fb5d5a0f18437 comme ça Vous pouvez télécharger des photos ;

Mais voici le problème. Lorsque je soumets le formulaire à l'aide du formulaire, la page de soumission de la valeur de retour apparaît directement et la page d'origine s'actualise ; De cette façon, nous pouvons arriver en premier. L'Ajax asynchrone peut réaliser un rafraîchissement partiel

Sans plus tarder, passons directement au code

Le premier est le HTML :

Ce qui précède est le code html, pour votre commodité, la copie et le css sont directement dans la balise

<form id = "form_insert" method = "post">
<table style = "font-size: 13px; margin: 13px auto;"> 
<tr>
<td style = "text-align: right;">类型</td>
<td>:  <input id = "acttype" style = "width:150px" class = "easyui-textbox" data-options = "required:true"></td>
</tr>
<tr><td colspan = "2" style = "height: 13px"></td>
</tr>
<tr>
<td style = "text-align: right;">名称</td>
<td>:  <input id = "actname" style = "width:150px" class = "easyui-textbox" data-options = "required:true"></td>
</tr>
<tr><td colspan = "2" style = "height: 13px"></td>
</tr>
<tr>
<td style = "text-align: right;">开始时间</td>
<td>:  <input id = "actstarttime" style = "width:150px" class = "easyui-datetimebox" data-options = "required:true"></td>
</tr>
<tr><td colspan = "2" style = "height: 13px"></td>
</tr>
<tr>
<td style = "text-align: right;">结束时间</td>
<td>:  <input id = "actendtime" style = "width:150px" class = "easyui-datetimebox" data-options = "required:true"></td>
</tr>
<tr><td colspan = "2" style = "height: 13px"></td>
</tr>
<tr>
<td style = "text-align: right;">省</td>
<td>:  <input id ="mem_Province" style = "width:150px" class = "easyui-combobox" data-options = "required:true"></td>
</tr>
<tr><td colspan="2" style="height: 13px"></td>
</tr>
<tr>
<td style="text-align: right;">市</td>
<td>:  <input id = "mem_City" style = "width:150px" class = "easyui-combobox" data-options = "required:true"></td>
</tr>
<tr><td colspan = "2" style = "height: 13px"></td>
</tr>
<tr>
<td style = "text-align: right;">门店</td>
<td>:  <input id = "mem_Shop" style = "width:150px" class = "easyui-combobox" data-options = "required:true"></td>
</tr>
<tr><td colspan="2" style="height: 13px"></td>
</tr>
<tr>
<td style = "text-align: right;">具体地址</td>
<td>:  <input id = "actadd" style = "width:150px" class = "easyui-textbox" data-options = "required:true"></td>
</tr>
</table>
</form>
<form id = "form_sub" style = "font-size: 13px;">
<table style="font-size: 13px; margin: 13px auto;">
<tr>
<td style = "text-align: right;">上传图片</td>
<td>:  <input class = "easyui-filebox" name = &#39;photo&#39; style = "width:153px" data-options = "required:true,prompt:&#39;选择上传图片&#39;,buttonText:&#39; 选 择 &#39;"></td>
<td><input type = &#39;text&#39; id = "Item" name = &#39;item&#39; style = "display:none;"></td>
</tr>
</table>
</form>
<p style = "text-align:right; padding:2px 5px;">
<a id = "sub" class = "easyui-linkbutton" data-options = "iconCls:&#39;icon-ok&#39;" href = "javascript:void(0)">
保存
</a>    
<a class = "easyui-linkbutton" data-options = "iconCls:&#39;icon-quxiao&#39;" href = "javascript:void(0)" onclick = "window_open($(&#39;#insert_form&#39;), &#39;close&#39;)">
取消
</a>    
</p>

De nombreux amis veulent demander pourquoi deux formulaires sont écrits

C'est parce que selon l'exigence de ; recevant des données en arrière-plan, les informations transmises deviennent

Chaîne

et image

transformez d'abord les informations en chaîne

puis mettez-les dans le deuxième formulaire A ; un ami prudent a découvert que dans le deuxième formulaire, le style="display:none" dans la balise d5fd7aea971a85678ba271703566ebfd du formulaire est une balise cachée

Oui, j'ai obtenu les données via le premier formulaire et je me suis retourné ; dans une chaîne via js, puis placez-le dans la balise cachée

De cette façon, vous pouvez soumettre le deuxième formulaire via Ajax ;

code js :

Tout le monde a vu que j'utilisais la méthode FormData et a dit : Vraiment, c'est vraiment facile à utiliser en HTML5. Vous n'avez pas besoin d'écrire enctype = 'multipart/form-data' lors du téléchargement d'images

$( '#sub' ).click( function () {
　　var actTimeStart1 = $ ('#actstarttime') . datebox ('getValue');
　　var actTimeStart = changeDateToLong(actTimeStart1);
　　var actTimeEnd1 = $('#actendtime').datebox('getValue');
　　var actTimeEnd = changeDateToLong(actTimeEnd1);
　　if(actTimeStart != '' && actTimeEnd != '' && (actTimeStart - actTimeEnd > 0)){
　　　　$.messager.alert('警告','结束时间不能小于开始时间！','error');
　　　　return false;
　　}
　　else{
　　　　if ($('#form_insert').form('validate')) {
　　　　　　var actType = document.getElementById("acttype").value;
　　　　　　var actName = document.getElementById("actname").value;
　　　　　　var actArea = document.getElementById("actadd").value;
　　　　　　var actTimeStart1 = $('#actstarttime').datebox('getValue');
　　　　　　var actTimeStart = changeDateToLong(actTimeStart1);
　　　　　　var actTimeEnd1 = $('#actendtime').datebox('getValue');
　　　　　　var actTimeEnd = changeDateToLong(actTimeEnd1);
　　　　　　var t2 = $('#mem_Shop').combobox('getValue');
　　　　　　var jsonObj = {actType:actType,actName:actName,actTimeStart:actTimeStart,actTimeEnd:actTimeEnd,actArea:actArea,t2:t2};
　　　　　　var activityMemberJson = JSON.stringify(jsonObj);
　　　　　　document.getElementById("Item").value=activityMemberJson;
　　　　　　var form = new FormData(document.getElementById("form_sub"));
　　　　　　$.ajax({
　　　　　　　　url : ../activity/actionActivityInsert', //http://www.cnblogs.com/jayxxxxxxx/
　　　　　　　　type : "post",
　　　　　　　　data : form, //第二个Form表单的内容
　　　　　　　　processData : false,
　　　　　　　　contentType : false,
　　　　　　　　error : function(request) {
　　　　　　　　},
　　　　　　　　success : function(data) {
　　　　　　　　　　$('#box').datagrid('reload');
　　　　　　　　}
　　　　　　});
　　　　　　window_open($('#insert_form'), 'close');
　　　　}else {
　　　　　　$.messager.alert('警告' , '信息不完整!' , 'error');
　　　　}
　　}
});

. Ce qui précède est le formulaire de soumission de formulaire Ajax et ce que je vous ai présenté. Exemple de code pour le téléchargement de fichiers, j'espère que cela aidera tout le monde !

Recommandations associées :

Utilisez l'objet FormData de HTML5 pour soumettre de manière asynchrone des données de fichier via le formulaire Ajax

JQuery Créer une instance de soumission de formulaire PHP AJAX

Implémenter une instance de vérification de formulaire Ajax

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!