Javascript 同一ajax调用必须传递不同的URL
我正在做添加和编辑操作。 为了执行编辑操作，我使用了下面的链接作为参考 完成了。如果我点击编辑按钮，我可以看到带有详细信息的弹出表单。现在我必须调用函数，并且应该为add和edit执行ajax调用。但是编辑的URL是不同的。我应该怎么做Javascript 同一ajax调用必须传递不同的URL,javascript,jquery,Javascript,Jquery,我正在做添加和编辑操作。 为了执行编辑操作，我使用了下面的链接作为参考 完成了。如果我点击编辑按钮，我可以看到带有详细信息的弹出表单。现在我必须调用函数，并且应该为add和edit执行ajax调用。但是编辑的URL是不同的。我应该怎么做 用户列表 添加、编辑、删除用户 这些用户将 已永久删除，无法恢复。你确定吗 用户列表 {如果结果|长度==0%} 没有用户详细信息，如果需要，可以添加 {%else%} 用户名 用户持续时间 用户描述 用户需求 行动 {结果%中每个_项的百分比} {{each
用户列表
添加、编辑、删除用户
这些用户将
已永久删除，无法恢复。你确定吗
用户列表
{如果结果|长度==0%}
没有用户详细信息，如果需要，可以添加
{%else%}
用户名
用户持续时间
用户描述
用户需求
行动
{结果%中每个_项的百分比}
{{each_item.user_name}
{{each_item.user_time}
{{each_item.user_description}}
{{每个项目.用户需求}
{%endfor%}
{%endif%}
所有表单字段都是必需的
用户名
期间
描述
要求
$（函数（）{
变量对话框，窗体，
用户名=$（“#用户名”），
持续时间=$（“#持续时间”），
description=$（“#description”），
需求=$（“#需求”），
所有字段=$（[]）。添加（用户名）。添加（持续时间）。添加（说明）。添加（要求），
提示=$（“.validateips”）；
函数更新（t）{
控制台日志（t）；
提示
.文本（t）
.addClass（“ui状态突出显示”）；
setTimeout（函数（）{
removeClass（“ui状态突出显示”，1500）；
}, 500);
}
函数校验长度（o、n、最小值、最大值）{
如果（o.val（）.length>max | | o.val（）.length<html>
<head>
<title>
List of user
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Add,Edit,Delete user</title>
<link href="/static/css/qxf2_scheduler.css" rel="stylesheet">
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<link href="//resources/demos/style.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="dialog-confirm" title="Delete user?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>These user will be
permanently deleted and cannot be recovered. Are you sure?</p>
</div>
<div class="container col-md-offset-1">
<h2 class="grey_text text-center">user List</h2>
<input class="btn btn-info" type="button" id="create-user" value="Add user">
<div class="row-fluid top-space-20">
{% if result | length == 0 %}
<div>
<p>There are no user details ,If you want you can add it </p>
</div>
{% else %}
<table class="table table-striped">
<thead>
<th>user name</th>
<th>user duration</th>
<th>user Description</th>
<th>user requirements</th>
<th>Actions</th>
</thead>
{% for each_item in result %}
<tbody>
<td>{{each_item.user_name}}</td>
<td>{{each_item.user_time}}</td>
<td>{{each_item.user_description}}</td>
<td>{{each_item.user_requirement}}</td>
<td>
<input class="edituser btn btn-info" type="button" value="Edit" data-user-id = "{{each_item.user_id}}" data-user-name="{{each_item.user_name}}" data-user-description="{{each_item.user_description}}" data-user-requirement="{{each_item.user_requirement}}" data-user-duration="{{each_item.user_time}}">
<input type="button" class="btn btn-info" onclick="delete_user(this)" value="Delete"
id="delete-button{{each_item.user_id}}" data-delete-user-id="{{each_item.user_id}}"
data-delete-department-id="{{department_id}}" />
</td>
</tbody>
{% endfor %}
{% endif %}
</table>
</div>
</div>
<div id="dialog-form" title="Create new user">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
<label for="username">user name</label>
<input type="text" name="username" id="username" class="text ui-widget-content ui-corner-all">
<label for="duration">Duration</label>
<input type="text" name="duration" id="duration" class="text ui-widget-content ui-corner-all">
<label for="description">Description</label>
<input type="text" name="description" id="description" class="text ui-widget-content ui-corner-all">
<label for="requirements">Requirements</label>
<input type="requirements" name="requirements" id="requirements"
class="text ui-widget-content ui-corner-all">
<input type="hidden" id='departmentId' ,value="{{department_id}}">
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
<script>
$(function () {
var dialog, form,
username = $("#username"),
duration = $("#duration"),
description = $("#description"),
requirements = $("#requirements"),
allFields = $([]).add(username).add(duration).add(description).add(requirements),
tips = $(".validateTips");
function updateTips(t) {
console.log(t);
tips
.text(t)
.addClass("ui-state-highlight");
setTimeout(function () {
tips.removeClass("ui-state-highlight", 1500);
}, 500);
}
function checkLength(o, n, min, max) {
if (o.val().length > max || o.val().length < min) {
o.addClass("ui-state-error");
updateTips("Length of " + n + " must be between " +
min + " and " + max + ".");
return false;
} else {
return true;
}
}
function addUser(url,msg) {
var valid = true;
allFields.removeClass("ui-state-error");
var username = $("#username");
var duration = $("#duration");
var description = $("#description");
var requirements = $("#requirements");
var departmentId = document.getElementById("departmentId").value;
valid = valid && checkLength(username, "username", 3, 16);
valid = valid && checkLength(duration, "duration", 3, 16);
valid = valid && checkLength(description, "description", 3, 300);
valid = valid && checkLength(requirements, "requirments", 5, 300);
console.log(url,msg);
if (valid) {
var username = $("#username").val();
var duration = $("#duration").val();
var description = $("#description").val();
var requirements = $("#requirements").val();
var departmentId = document.getElementById("departmentId").value;
$("#users tbody").append("<tr>" +
"<td>" + username + "</td>" +
"<td>" + duration + "</td>" +
"<td>" + description + "</td>" +
"<td>" + requirements + "</td>" +
"</tr>");
$.ajax({
type: 'POST',
url: url,
data: {
'username': username,
'duration': duration,
'description': description,
'requirements': requirements
},
success: function (result) {
console.log(result);
alert(msg);
document.location.href = "/departments";
},
})
dialog.dialog("close");
}
return valid;
}
dialog = $("#dialog-form").dialog({
autoOpen: false,
height: 400,
width: 350,
modal: true,
buttons: {
"Create user": addUser,
Cancel: function () {
dialog.dialog("close");
}
},
close: function () {
form[0].reset();
allFields.removeClass("ui-state-error");
}
});
form = dialog.find("form").on("submit", function (event) {
event.preventDefault();
var url = '/department/%d/user'%departmentId;
var msg = 'The user has been added'
addUser(url,msg);
});
editDialog = $("#dialog-form").dialog({
autoOpen: false,
height: 400,
width: 350,
modal: true,
buttons: {
"Edit user": addUser,
Cancel: function () {
dialog.dialog("close");
}
},
close: function () {
form[0].reset();
allFields.removeClass("ui-state-error");
}
});
form = dialog.find("form").on("submit", function (event) {
event.preventDefault();
var url = '/department/%d/user/edit'%departmentId;
var msg = 'The user has been edited'
addUser(url,msg);
});
$("#create-user").button().on("click", function () {
console.log("I am first");
dialog.dialog("open");
});
$(".edituser").button().on("click", function () {
var id = $(this).attr("data-user-id");
var userName=$(this).attr("data-user-name");
var userDuration=$(this).attr("data-user-duration");
var userDescription=$(this).attr("data-user-description");
var userRequirements=$(this).attr("data-user-requirement");
console.log(id,userName);
$("#username").val(userName);
$("#duration").val(userDuration);
$("#description").val(userDescription);
$("#requirements").val(userRequirements);
editDialog.dialog("open");
});
});
</script>
<script>
//Confirmation message for deleteing user
var user_id;
var department_id;
var dialog = $("#dialog-confirm").dialog({
resizable: false,
height: "auto",
autoOpen: false,
width: 400,
modal: true,
buttons: {
"Delete": function () {
console.log("user_id" + user_id)
$.ajax({
type: 'GET',
url: '/user/' + user_id + '/departments/' + department_id + '/delete',
data: { 'user_id': user_id },
success: function (data) {
window.location.reload();
console.log("successfully deleted the data")
}
})
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
function delete_user(action_delete) {
user_id = action_delete.getAttribute("data-delete-user-id");
department_id = action_delete.getAttribute("data-delete-department-id");
dialog.dialog("open");
}
</script>
</body>
</html>
function doAjaxCall(var url,var data,var method,var callBackFunction)
{
$.ajax({
type: method,
url: url,
data: data,
success: function(data){
callBackFunction(data);
}
});
}
function onAdd(data){
// Code to append
}
doAjaxCall("/add",userData,"POST",onAdd);
function onEdit(data){
// Code to update
}
doAjaxCall("/update",userData,"PUT",onEdit);