Javascript 如何使用JS fetch api系统替换由onBlur触发的多个表单字段的jQuery AJAX系统？

我有大约160个表单字段（在选项卡式表单上），类似于：

<form id="7" name="7" action="#" method="post">
<input type="text" id="houseName" name="houseName" value="<?=$existingValue[0]['houseName']?>
<input type="text" id="streetName" name="streetName" value="<?=$existingValue[0]['streetName']?>
...
</form>

或

完整的url是否必须从JS代码中调用，或者是否可以通过相对于服务器的本地路径进行调用（就像我试图替换的较旧的jQuery/AJAX版本上一样）

获取代码可以驻留在单独的文件（如app.2.js）中，并在html文档的头部调用，还是必须是内联的

使用fetch时，post.2.php中的php代码是否需要特定格式

对于所有输入字段，是否可以使用一段fetch api代码来实现这一点，或者对于每个输入字段，是否需要单独的代码块

请对我耐心点——我不年轻，如果没有简单的英语例子，学习这些东西并不容易。他们似乎都认为每个人一开始都是有经验的！我不是在找人写我的代码-我想学习，但一些简单的解释代码示例将非常感谢。谢谢

编辑

根据ADyson的请求，这是之前执行ajax操作的代码：

function blurHandler() {
    var id = this.id;
    $.post('./collect/post.2.php?data=' + secData, $('#'+id).serialize(), function(data) {
        $("#errorText_"+id).html(data['errorText_'+id]);
        $("#resultImg_"+id).html(data['resultImg_'+id]);
    }, 'json' );
}

我相信这取决于html标题中的以下行：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

下面是在服务器端启动的php示例。数据库处理中使用的xID值是从“data=”字符串推断出来的

    if(isset($_POST['houseName'])) {
    $userInput = $_POST['houseName'];
    if(trim($userInput) == "") { $userInput = NULL; }
    try {
        $stmt = $conn->prepare("UPDATE $database.table01 SET `houseName` = :userinput WHERE `xID` = :xid");
        $stmt->bindParam(':userinput', $userInput, PDO::PARAM_STR, 32);
        $stmt->bindParam(':xid', $xID, PDO::PARAM_INT, 11);
        $stmt->execute();
    } catch(PDOException $e) { catchMySQLerror($e->getMessage()); }
    $report_name = array();
    if($userInput == NULL) {
        $report_name['errorText_houseName'] = "This field cannot be left blank";
        $report_name['resultImg_houseName'] = "<img src=\"./img/form_boo.gif\" class=\"resultImg\" alt=\"&#10008;\" title=\"&#10008;\">";
    } else {
        $report_name['errorText_houseName'] = NULL;
        $report_name['resultImg_houseName'] = "<img src=\"./img/form_yay.gif\" class=\"resultImg\" alt=\"&#10004;\" title=\"&#10004;\">";
    }
    echo json_encode($report_name);
}

if（isset（$\u POST['houseName']））{
$userInput=$_POST['houseName']；
如果（trim（$userInput）==“”）{$userInput=NULL；}
试一试{
$stmt=$conn->prepare（“更新$database.table01设置`houseName`=:userinput，其中`xID`=:xID”）；
$stmt->bindParam（':userinput'，$userinput，PDO:：PARAM_STR，32）；
$stmt->bindParam（':xid'，$xid，PDO:：PARAM_INT，11）；
$stmt->execute（）；
}catch（PDOException$e）{catchMySQLerror（$e->getMessage（））；}
$report_name=array（）；
如果（$userInput==NULL）{
$report\U name['errorText\U houseName']=“此字段不能为空”；
$report_name['resultImg_houseName']=“”；
}否则{
$report\u name['errorText\u houseName']=NULL；
$report_name['resultImg_houseName']=“”；
}
echo json_encode（$report_name）；
}

这一切都是相当古老的，虽然功能。我不知道如何将此功能转换为使用fetch api。

您可以使用此功能

的URL解析算法与AJAX完全相同

Fetch API使用，这些API是通过JavaScript引入的。XMLHttpRequest使用回调；这就是它们看起来如此不同的原因

切换到获取API后，不需要修改后端代码

请按以下方式更新表格输入：

...

下面的代码将模糊输入及其值作为虚拟表单的单个成员提交

函数处理程序（输入）{
const id=input.id；
//创建新的FormData实例
const formData=new formData（）；
//将输入附加到FormData中
formData.append（input.name，input.value）；
//现在我们来执行POST
fetch（`./collect/post.2.php？data=${secData}`{
方法：“POST”，
body:formData，//Fetch API可以自动处理formData实例
})
.then（（response）=>response.json（））//将服务器响应解析为json
.then（（data）=>{///解析后的JSON作为`数据'传递`
document.getElementById（`errorText\${id}`）。innerHTML=data[`errorText\${id}`]；
document.getElementById（`resultImg_${id}`）。innerHTML=data[`resultImg_${id}`]；
})
.catch（（错误）=>{
//跟踪错误并在出现问题时弹出警报
控制台跟踪（错误）；
警报（“未能提交表单”）；
});
}

浏览器根据您输入的内容构造最终URL。无论您使用什么客户端发出AJAX请求，这一点都是一样的。同样，fetch（）代码的放置位置与任何其他AJAX客户机都没有区别。PHP中不需要任何更改，只要您使完成的请求相同—PHP看到的只是HTTP请求中的数据，它不知道该请求是如何生成的。如果您以前使用过jQuery的$.ajax函数，那么关键概念都是相同的。它只是使用不同的客户端来做相同的事情（例如，有点像在Thunderbird和Windows Mail之间切换来阅读电子邮件）。如果您有一些$.ajax代码工作正常，并且您正在尝试将其转换为fetch，那么请向我们展示工作代码，以及您迄今为止在使用fetch编写等效代码方面的最佳尝试，那么我们也许可以帮助您正确地完成它。但是您上面提到的问题本身都不是问题。或者，如果这是一项新的工作，请向我们展示一个您正在做的示例—添加一些PHP，以便我们了解目标是什么，然后显示获取代码，并包括它所依赖的任何相关数据和/或HTML。最后，告诉我们您在尝试运行代码时看到的错误消息和/或意外行为（无论是在浏览器窗口中，还是在浏览器的开发人员工具中，尤其是在控制台和网络工具中）。同样，在这种情况下，一旦我们有了一个可复制的示例，我们就可以帮助您。但我们不会做的是，为您生成一个通用的获取教程，因为这不是一个教程站点。我们回答关于具体问题的具体问题。目前有1000多个教程。这是一个不错的例子，我认为它每一步都非常详细。显然，和他们中的大多数人一样，他们认为您对HTTP和AJAX有基本的了解（否则您将永远无法理解基于这些概念的任何其他内容）。@ADyson感谢您的评论，非常感谢。这确实解释了为什么我看到了获取url样式的差异（一些是完整地址，而另一些看起来像本地路径！），我知道这不是一个教程的地方，一个

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

    if(isset($_POST['houseName'])) {
    $userInput = $_POST['houseName'];
    if(trim($userInput) == "") { $userInput = NULL; }
    try {
        $stmt = $conn->prepare("UPDATE $database.table01 SET `houseName` = :userinput WHERE `xID` = :xid");
        $stmt->bindParam(':userinput', $userInput, PDO::PARAM_STR, 32);
        $stmt->bindParam(':xid', $xID, PDO::PARAM_INT, 11);
        $stmt->execute();
    } catch(PDOException $e) { catchMySQLerror($e->getMessage()); }
    $report_name = array();
    if($userInput == NULL) {
        $report_name['errorText_houseName'] = "This field cannot be left blank";
        $report_name['resultImg_houseName'] = "<img src=\"./img/form_boo.gif\" class=\"resultImg\" alt=\"&#10008;\" title=\"&#10008;\">";
    } else {
        $report_name['errorText_houseName'] = NULL;
        $report_name['resultImg_houseName'] = "<img src=\"./img/form_yay.gif\" class=\"resultImg\" alt=\"&#10004;\" title=\"&#10004;\">";
    }
    echo json_encode($report_name);
}