为啥在提交表单后参数会自动传入 URL
Posted
技术标签:
【中文标题】为啥在提交表单后参数会自动传入 URL【英文标题】：Why Parameters passing in URL automatically after submit a form为什么在提交表单后参数会自动传入 URL 【发布时间】：2018-08-22 20:53:42 【问题描述】：我正在使用具有 1 个视图的 mvc 4，该视图具有一个简单的 html 表单，可以使用 web api 方法 ajax 调用和使用 Visual Studio 2013 在表中添加员工数据。
在代码中，我没有在 url 中传递任何参数，但它在提交表单后显示，并且我的插入操作工作正常。但是我无法找到 url 中参数的原因，如下面的 sn-p。 那么我怎样才能删除这个url参数呢？
http://localhost:1306/AddEmployees?Add_Position_Territory_Region=8&Employee_ID=640488&Add_Position_City=8&Add_Employee_Name=Sanjay+Shivhar+Nakate&Employee+Start+Date=2018-03-14&Add_Position_Cease_Date=2018-03-27&Add_Position_FTE=8&Add_Position_FTE_WM+=8&Add_Currency=8&Add_Position_FTE_SU=8&Add_salary=8&Add_Position_FTE_Total=8&Add_Bouns=8&Add_Incentive=8
我的视图代码
<script type="text/javascript">
$("body").on("click", "#AddEmploye", function ()
var _employee = ;
_employee.EMPLOYEE_ID = $("#ID_Employee_ID").val(); //*
_employee.MAX_FTE = $("#ID_Add_Position_FTE").val();//*
_employee.FTEMW = $("#ID_Add_Position_FTE_WM").val();//*
_employee.FTESU = $("#ID_Add_Position_FTE_SU").val();//*
_employee.TOTALFTE = $("#ID_Add_Position_FTE_Total").val();//*
_employee.EMPLOYEE_ID = $("#ID_Employee_ID").val();//*
_employee.COUNTRY_ID = $("#Add_Position_Country").val(); //*
_employee.REGION = $("#ID_Add_Position_Territory_Region").val(); //*
_employee.CITY = $("#ID_Add_Position_City").val(); //*
_employee.MARKET_ID = null; //$("#").val(); //No field in form
// _employee.OTHER_LOCATION = null //$("#").val(); //No field in form
_employee.CATEGORY_ID = null;// $("#").val(); //No field in form
_employee.CURRENCY = $("#ID_Add_Currency").val(); //*
_employee.SALARY = $("#ID_Add_salary").val();//*
_employee.BONUS = $("#ID_Add_Bouns").val();//*
_employee.SALES_INCENTIVE = $("#ID_Add_Incentive").val();//*
_employee.AUXILIARY = null; // $("#ID_Add_Bouns").val(); //No field in form
_employee.EMPLOYEE_ID = $("#ID_Employee_ID").val();
_employee.ACTIVE_STATUS = 1 //$("#").val(); //No field in form ** 1
_employee.POSITION_TITLE_ID = $("#Add_Employee_Title").val(); //*
_employee.MANAGER_REPORT_TO_ID = null; //$("#").val(); //No field in form
_employee.POS_CC_ID = $("#Add_Position_Cost_Centre").val(); //*
_employee.PLAN_START_DATE = $("#ID_Employee_Start_Date").val(); //*
_employee.CEASE_DATE = $("#ID_Add_Position_Cease_Date").val();
_employee.COST_CENTERE_ID = $("#Add_Position_Cost_Centre").val();
_employee.SO_NAME_ID = null; // $("#").val(); //No field in form
_employee.SAP_CC_ID = null; // $("#").val(); //No field in form
_employee.DIV_CC_ID = null; // $("#").val(); //No field in form
_employee.EMPLOYEE_ID = $("#ID_Add_Incentive").val();
_employee.EMPLOYEE_ID = $("#ID_Employee_ID").val(); //*
_employee.JOB_FAMILY_GENERIC_ID = null; //$("#").val(); //No field in form
_employee.JOB_GROUP_ID = null; //$("#").val(); //No field in form
//_employee.APPROVED_PERIOD = null; //$("#").val(); //No field in form
// _employee.APPROVED_DATE = null; // $("#").val(); //No field in form
// _employee.VALIDATION = null; // $("#").val(); //No field in form
// _employee.PEOPLE_MANAGER = $("#ID_Add_Incentive").val();
// _employee.POSITION_ID_UK = null; // $("#").val(); //No field in form
_employee.EMP_ACTIVE_STATUS_TF = 1 //$("#ID_Add_Incentive").val(); //No field in form **
_employee.JOB_STATUS_TYPE = $("#ID_Add_job_status").val();
// _employee.JOB_TYPE = null; // $("#ID_Add_Incentive").val();
// _employee.HEY_LEVEL = null; //$("#").val(); //No field in form
$.ajax(
type: "POST",
// url: "/api/ManageEmployees/AddEmployeesMethod",
url: "/api/Employee/AddEmployeesMethod",
data: JSON.stringify(_employee),
// data: '" DepartmntName": "' + DepartmntName +'"," DateCreated":"' + DateCreated + '", " DateModified ":"'+ DateModified +'"," IsDeleted":"' + IsDeleted +'", "ParentID":"' + ParentID + '", "Icon": "' + Icon + '", "Paren":"' + Paren +'" ',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r)
alert("success" + r);
,
failure: function (r)
alert(r.responseText);
,
);
);
</script>
<form class="form-style-9">
<ul>
<li>
<h3>
Manage Employee
</h3>
</li>
<li>
@*<div>
<input type="radio" name="gender" value="new" checked> New
<input type="radio" name="gender" value="replaced"> Replaced
<select id="Add_Position_Market_Country" class="field-style field-split align-right slide-left-select-box"></select>
@*<input type="text" name="field2" class="field-style field-split align-right" placeholder="Market*" />
</div>*@
<h4>
Add Employee
</h4>
</li>
<li>
<select id="Add_job_ID" class="field-style field-split align-left" required></select>
<select id="Add_Position_Country" class="field-style field-split align-right slide-left-select-box">
<option value="">Select Add Country</option>
</select>
</li>
<li>
<select id="Add_Employee_Title" class="field-style field-split align-left" required></select>
<input type="text" id="ID_Add_Position_Territory_Region" name="Add_Position_Territory_Region" class=" field-style field-split align-right" placeholder="Territory / Region" />
</li>
<li>
<input type="text" id="ID_Employee_ID" name="Employee_ID" class="field-style field-split align-left" placeholder="Employee ID" />
@*<input type="text" name="Add_Position_CC" class="field-style field-split align-right" placeholder="Position CC" />*@
<input type="text" id="ID_Add_Position_City" name="Add_Position_City" class=" field-style field-split align-right" placeholder="City" />
</li>
<li>
<input type="text" id="ID_Add_Employee_Name" name="Add_Employee_Name" class=" field-style field-split align-left" placeholder="Add Employee Name" />
<input type="date" id="ID_Employee_Start_Date" name="Employee Start Date" class=" field-style field-split align-right" placeholder="Employee Start Date" />
</li>
<li>
<select id="ID_Add_job_status" class="field-style field-split align-left">
<option value="0">--Select job Status--</option>
<option value="1">Permanent</option>
<option value="2">Temporary</option>
</select>
<input type="date" id="ID_Add_Position_Cease_Date" name="Add_Position_Cease_Date" class=" field-style field-split align-right" placeholder="Employee Cease Date" />
</li>
<li>
<input type="text" id="ID_Add_Position_FTE" name="Add_Position_FTE" class=" field-style field-split align-left" placeholder="FTE " />
<select id="Add_Position_Cost_Centre" class="field-style field-split align-right slide-left-select-box"></select>
</li>
<li>
<input type="text" id="ID_Add_Position_FTE_WM" name="Add_Position_FTE_WM " class=" field-style field-split align-left" placeholder="FTE WM " />
<input type="text" id="ID_Add_Currency" name="Add_Currency" class=" field-style field-split align-right" placeholder="Currency" />
</li>
<li>
<input type="text" id="ID_Add_Position_FTE_SU" name="Add_Position_FTE_SU" class=" field-style field-split align-left" placeholder="FTE SU" />
<input type="text" id="ID_Add_salary" name="Add_salary" class=" field-style field-split align-right" placeholder="Salary" />
</li>
<li>
<input type="text" id="ID_Add_Position_FTE_Total" name="Add_Position_FTE_Total" class=" field-style field-split align-left" placeholder="FTE Total" />
<input type="text" id="ID_Add_Bouns" name="Add_Bouns" class=" field-style field-split align-right" placeholder="Bouns" />
</li>
<li>
<input type="text" id="ID_Add_Incentive" name="Add_Incentive" class=" field-style field-split align-right" placeholder="Incentive" />
</li>
<li>
<input type="submit" value="Submit" id="AddEmploye"/>
</li>
</ul>
</form>
【问题讨论】：
【参考方案1】：您处理提交按钮的点击事件，而不是取消默认提交，因此您进行了 ajax 调用来提交 plus 您也在进行表单的默认提交，这是一个GET，因此表单控件的值被添加到查询字符串并返回给您的 GET 方法。
更改脚本以取消默认事件
$("body").on("click", "#AddEmploye", function (e)
e.preventDefault();
....
【讨论】：
以上是关于为啥在提交表单后参数会自动传入 URL的主要内容，如果未能解决你的问题，请参考以下文章
使用 post 方法提交表单后，表单数据附加到 php 中的 url 为啥？