两件事 Jquery.form 锁
- 表单提交跳转
- 如何解决同时调用相同接口产生的数据错误
两个问题
第一个解决了,用jQuery.form 这个插件
HTML 部分的代码
<form id="projectInfo" action="/Home/Add" method="post" enctype="multipart/form-data"> <div class="form-group row"> <label for="projectImage" class="col-sm-2 col-form-label">项目图片</label> <div class="col-sm-10"> <input type="file" name="projectImage" class="form-control-file" id="projectImage" /> </div> </div> <div class="form-group row"> <label for="projectName" class="col-sm-2 col-form-label">项目名</label> <div class="col-sm-10"> <input type="text" name="projectName" class="form-control" id="projectName" required /> </div> </div> <div class="form-group row"> <label for="projectDate" class="col-sm-2 col-form-label">项目时间</label> <div class="col-sm-10"> <input type="date" name="projectDate" class="form-control" id="projectDate" required /> </div> </div> <div class="form-group row"> <label for="projectContent" class="col-sm-2 col-form-label">项目内容</label> <div class="col-sm-10"> <textarea id="projectContext" name="projectContext"></textarea> </div> </div> <button type="submit" class="btn btn-primary">添加</button> </form> <div id="output1">替换文本</div>
js部分代码
$(document).ready(function () { var options = { target: '#output1', // target element(s) to be updated with server response beforeSubmit: showRequest, // pre-submit callback success: showResponse // post-submit callback // other available options: //url: url // override for form's 'action' attribute //type: type // 'get' or 'post', override for form's 'method' attribute //dataType: null // 'xml', 'script', or 'json' (expected server response type) //clearForm: true // clear all form fields after successful submit //resetForm: true // reset the form after successful submit // $.ajax options can be used here too, for example: //timeout: 3000 }; // bind form using 'ajaxForm' $('#projectInfo').ajaxForm(options); }); function showRequest(formData, jqForm, options) { // 提交前 var queryString = $.param(formData); // jqForm is a jQuery object encapsulating the form element. To access the // DOM element for the form do this: // var formElement = jqForm[0]; console.log(queryString) // here we could return false to prevent the form from being submitted; // returning anything other than false will allow the form submit to continue return true; } // post-submit callback function showResponse(responseText, statusText, xhr, $form) { // 提交后 console.log(statusText) console.log(responseText) }
后台代码
public string Add() { HttpPostedFileBase projectImage = Request.Files[0]; string projectName = Request.Form["projectName"]; string projectDate = Request.Form["projectDate"]; string projectContext = Request.Form["projectContext"]; return "返回内容"; }
第二个问题,是在测试中发现有一个接口多次调用的话会发生多次执行一条SQL语句的风险,对数据产生不好的影响
暂时的解决方法就是在执行前做了一个判断,改变过就不允许执行了,这样多次调用这个接口的时候就会有这个判断,判断后就如果有数据就不允许执行了