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

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 个用于 exmaple 的 div。 html:

创建.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 url 也可能会发生变化，因为当前它指向 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>