Question

我使用此代码进行ajax调用，以在不重新加载页面的情况下更改主页面中div的内容：

function ajaxcall()
{
    $.ajax({
        type: "POST",
        url: "/create.php",
        success: function( returnedData ) {
            $( '#container' ).html( returnedData );
        }
    });
}

我称之为：

 <p><a  onclick="ajaxcall()" >Create</a></p>

问题非常复杂，因为我必须在同一个div中调用4个页面：

create.hmtl ; update.html; delete.html ; read.html

此外，我在同一页面中有两种不同的形式需要相同的东西，我的意思是我应该用另一个div“container-1”为第二种形式做同样的事情，然后我在创建中有2个div用于exmaple。 html：

create.html：

 <div id="container">
     ....
 </div>

 <div id="container-1">
     ....
 </div>

所以我每次都会调用create.html但不同的形式使用不同的div，问题是使用最小的干净代码来完成我上面解释的所有内容吗？

修改

为了解释更多我的问题，我有4个选项（创建/更新/删除/读取）有4个页面，并且在每个页面中它们是2个div和2个表单的2个内容，我应该更改每个选项的div内容（ CRUD）为网页中的每个表单！

form -> ajax call content -> create.html -> div:container
form-1 -> ajax call content -> create.html -> div:container-1
form-1 -> ajax call content -> update.html -> div:container-1

Answer 1

您可以将这些作为参数添加到函数中，并使其如下所示

function ajaxcall(url, data, targetDivId)
{
    $.ajax({
        type: "POST",
        url: url,
        data : data,
        success: function( returnedData ) {
            $("#"+targetDivId).html( returnedData );
        }
    });
}

针对您的情况：

我认为即使是AJAX网址也可能会改变，因为它指向create.php。如果它相同，那么你可以避免使用该参数。

 <p><a  onclick="ajaxcall('/create.php', {} , 'container-1')" >Create</a></p>

 <p><a  onclick="ajaxcall('/update.php', object2 , 'container-2')" >update</a></p>

 <p><a  onclick="ajaxcall('/delete.php', object3, 'container-3')" >Delete</a></p>

Answer 2

根据mohamedrias的回答，如果您还需要以不同方式处理CRUD用例中的每个备用路径，则可以使用全局事件处理程序。

请求时不要处理：

$.ajax({
    type: "POST",
    url: url,
    data : data,
    success: function( returnedData ) {
    }
});

为CRUD中的每个备用路径处理seperatley

$(document).ajaxSuccess(function(event, xhr, settings) {
        var query = settings.data;
        var url = settings.url;
    if (url.match(/create.php/) && query.match(/container1/)){
           $("#container1").find(".form-1").html( xhr.responseText );
    }
});

你还应该注意到我的例子中的选择器暗示“form-1”是一个Class而不是一个ID。 ID必须是唯一的，但类可以多次出现遵循此规则，如果您希望为每个备用路径重用相同的表单，则可以通过使用每个元素的唯一类名对表单中的离散元素进行寻址来实现。容器Div必须具有唯一的ID（如您所做）。但是你必须通过链接选择器来给出该元素上下文，首先使用ID选择div，然后使用class选择元素。

Answer 3

如果我理解它你想要为ajax调用函数提供一个参数来应用来自＆＃34; /create.php"的返回内容;到另一个div。

function ajaxcall(id, path)
{
    $.ajax({
        type: "POST",
        url: path,
        success: function( returnedData ) {
            $("#"+id).html( returnedData );
        }
    });
}

在html中你可以设置像

这样的id

 <p><a  onclick="ajaxcall(this.id, "/create.php")" >Create</a></p>

Answer 4

var xhr = new XMLHttpRequest();

xhr.onload = function(){

    var document = xhr.response;
    var container = document.getElementById('container');
    var container-1 = document.getElementById('container-1');
    console.log(container, container-1);

    // or

    // var containers = document.querySelectorAll("#container, #container-1" );
    //console.log(containers);

}

xhr.open('POST','/create.php');
xhr.setRequestHeader(
    'Content-Type', 
    'application/x-www-form-urlencoded'
);

xhr.responseType = 'document';
xhr.send();

对不同的页面和div使用一个ajax调用？

4 个答案: