❶ 前端表單提交怎樣 做出 興趣 限制選項
很常見的業務場景，就是前端一個表單，submit給後台，在web.form時代，有from的runat="server"配合submit自動會提交給服務端，然後服務端解析Request裝填對象。如果要是非同步提交的話，就麻煩點，from表單不會自動把你的所有value傳給後台，於是就一個一個獲取value值，通過json對象非同步提交給後台，然後再由後台一個一個解析，再封裝給對象。
$.post("Handler1.ashx",{Name:$("#txtName").val(),Age:$("#txtAge").val()},function(res)
{...})
很慶幸的是上面只有2個參數，如果需要提交有10多個參數的話，用這種方法相信大家都有手疼的感覺。
幸虧在jquery上有serializeArray方法，可以不關心表單內容，只要有name屬性，就會直接匹配value或者test值，生成一個json對象。如下：
<formid="createStudent_form"runat="server">
<table>
<tr><td>Name:</td><td><inputtype="text"name="Name"/></td></tr>
<tr><td>Address:</td><td><inputtype="text"name="Address"/></td></tr>
<tr><td>Sex:</td><td>男<inputtype="radio"name="Sex"value="1"/>女<inputtype="radio"name="Sex"value="0"/></td></tr>
<tr><td>Remark:</td><td><textareaname="Remark"></textarea></td></tr>
<tr><td><inputtype="button"value="submit"id="submit_btn"/></td></tr>
</table>
</form>
<scriptsrc="Scripts/jquery-1.10.2.min.js"></script>
<script>
$(function(){
$("#submit_btn").click(function(){
varjson=$("#createStudent_form").serializeArray();
console.log(JSON.stringify(json));
});
})
</script>
點擊提交表單，列印出來的結果是：
結果
一看是個json對象數組，除了第一個是webForm獨有的shit東西以外，其他大家一眼可以看出來是name，value兩個鍵值對相匹配。這與我們想要得到的格式{name:value}還不太一致，當然jquery做到這一步已經不錯了（其實內部實現原理也不難，拿到表單一一遍歷組成Json），剩下的就需要咱們自己擴展了。簡單改造如下：
serializeJson
通過上面的方法就得到了咱們想要的結果集了，但是這只是最基本的擴展，你可以繼續深化比如支持相同內容的多個表單提交，支持相同name的多選框等等。
咱們非同步提交給後端看看：
非同步提交com？
相信到了這一步後，用過Mvc的小夥伴們看了一下子就興奮起來了，因為Action會自動轉化類型，只要你在後台定義過一個StudentModel對象，其參數和name一致，然後不用關系Requset就可以直接拿到了對象的值，這簡直是爽呆了，幾乎是太簡單了。如下：
自定義實體轉化
希望能多少給你點幫助。
最後再反向操作下，給了Json對象，如何自動把值賦給表單中的元素：
數據源：
publicActionResultIndex()
{
returnView();
}
publicActionResultLoadAll()
{
List<Test>list=newList<Test>();
Testtest1=newTest(){
Id=1,
Name="xxx",
Title="xxx",IsCheck=false,
ClassId=1
};
list.Add(test1);
returnJson(list);
}
}
publicclassTest
{
publicintId{get;set;}
publicstringName{get;set;}
publicstringTitle{get;set;}
publicboolIsCheck{get;set;}
publicintClassId{get;set;}
}
前端：
<script>
$(function(){
load();
})
functionsyncJsonTofrom($form,entity)
{
for(varkeyinentity){
var$control=$form.find("[name="+key+"]");
if($control){
if($controlwww.66298899.com?attr("type")=="checkbox"&&entity[key]){
$control.attr("checked",true);
}
$control.val(entity[key]);
}
}
}
functionload(){
$.post("/Test/LoadAll",function(res){
varentity=res[0];
syncJsonTofrom($("#frm"),entity);
})
}
</script>
<formid="frm">
ID:
<inputtype="text"name="Id"/>
NAme:
<inputtype="text"name="Name"/>
Title
<inputtype="text"name="Title"/>
Ischeck<inputtype="checkbox"name="IsCheck"/>
class
<selectname="ClassId">
<optionvalue="0">xxx</option>
<optionvalue="1">222
</option>
<optionvalue="2">222333
</option>
</select>
</form>
❷ JS WEB前端開發如何防止重復提交的實現方
定義一個變數。
var flag= 0;
如果flag=0 就讓提交
在提交後，數據沒有返回來前，將flag=1
數據返回來後再設置成0
這樣就能防止重復提交。非常有效。
❸ 前端如何將圖片上傳至後端
1. 如果是通過form提交的方式 ，後端直接通過前端的name值即可獲得圖片
2.如果沒有通過form提交 ，則可以通過js將上傳的圖片進行base64轉碼，後端再進行解碼即可
❹ 前端文件上傳多種方式
前端上傳文件【包含圖片、視頻等資源文件】是相當常見的場景，作為一名前端開發人員你會遇到後端接收文件的多種方式，以及前端不同場景下的生成的不同文件上傳格式。
1、表單上傳方式【最場景、最簡單的方式】
上面的是挺簡單的，but 刷新了，這個體驗大多數場景中讓人接受不了，最簡單的處理方式設置submit 返回 false;
2、表單升級版 【formData】
有些場景中我們不一樣會使用form，或者說不想用，那麼formData就是一個很好的選擇了，首先刷新問題是肯定沒有了，而且看上逼格更高。
3、formData 上傳 blob 圖片
4、formData 上傳 base64 圖片； // 一般是把base64轉blob在上傳
其他方式歡迎留言探討， 上面大部分寫法是直接用vue的方式，其實都差不多哈。
❺ jquery或js前端提交數據的幾種方式
1.jquery提交數據的方式：
（1）第一種jquery序列化提交數據方式：
通過id獲取的form表單元素.serialize();
（2）第二種模擬form表單提交元素：
$('#form表單id').attr('method','post');
$('#form表單id'').find('input[name="type"]').val(test);
$('#form表單id').find('input[name="dfrom_to1"]').val(dfrom_to);
$('#form表單id').find('input[name="gt_road_new"]').val(gt_road);
$('#form表id').attr('action',AdminLTE.ctx+'/moles/ltegt/findAllCoverAndInterfere.do');
$('#analysisForm').submit();
2.js提交數據的方式：
(1).js提交表單( .submit()方法提交表單 )
function doSearch(){
var action ="<%=path%>/User_queryAllUser";
document.all.form.action = action;
document.all.form.submit();}
(2).js替代超鏈接( window.location.href )
<input type="button" id="modify" value="修改工號" οnclick="modifyEmp(${ myList.employeeId })">
//js不能起名為modify，為敏感關鍵字
function modifyEmp( employeeId ){
//employeeId 作為js的參數傳遞進來
window.location.href = '<%=path%>/User_openUserUpdate?employeeId='+employeeId;
❻ 詳解前端文件上傳
首先文件上傳首先想到的發post，當然還有其他的上傳協議，我們這里只介紹發post。
post支持四種content-type:
Content-Type 被指定為 application/x-www-form-urlencoded；其次，提交的數據按照 key1=val1&key2=val2 的方式進行編碼，key 和 val 都進行了 URL 轉碼。
首先生成了一個 boundary 用於分割不同的欄位，為了避免與正文內容重復，boundary 很長很復雜。然後 Content-Type 里指明了數據是以 mutipart/form-data 來編碼，本次請求的 boundary 是什麼內容。消息主體里按照欄位個數又分為多個結構類似的部分，每部分都是以 --boundary 開始，緊接著內容描述信息，然後是回車，最後是欄位具體內容（文本或二進制）。如果傳輸的是文件，還要包含文件名和文件類型信息。消息主體最後以 --boundary-- 標示結束。
RFC1867
application/json這個Content-Type都比較熟悉，當然也可以把json放到formData中；
RFC4657
參見RFC，也比較常見。
XML-RFC
在HTML中要有一個包含了文件輸入框的form元素，表單里元素的name一定要寫，最終形成formData時，是以name作為key值
如果直接在form里寫action的話，會刷新表單，同步請求。所以用發送非同步post請求方式。
你還可以不藉助HTML表單,直接向FormData對象中添加一個File對象或者一個Blob對象:
你還可以使用jQuery來發送FormData,但必須要正確的設置相關選項:
MDN：使用FormData
❼ 前端數據提交問題
前端可以讓用戶通過typeName選擇，但提交數據時必須是id，否則如果有同名的typeName後台是絕對無法區分的，即使是上帝也沒辦法。
比如前端是用下拉框來選擇userType的，那麼可以這樣：
<select name="userType">
<option value="這里放id">這里放typeName</option>
<option value="這里放id">這里放typeName</option>
......
</select>
這樣的話用戶選擇時看到的是typeName，但上傳時則是id