如何使用此代码更改Ajax以调用两个文件？

I'm new to AJAX, and I think I have a grasp on how it works. I created an edit profile form script using a tutorial and it works fine but I would also like for it to reload a php include file so that changes are automatically reloaded without going to another page.

我是AJAX的新手，我想我已经掌握了它是如何工作的。我使用教程创建了一个编辑配置文件表单脚本，它工作正常，但我也希望它重新加载一个php包含文件，以便自动重新加载更改而无需转到另一个页面。

So right now, when a form is submitted, it calls a php script I wrote named tehloader.php that makes changes to my database.

所以现在，当提交表单时，它会调用我编写的名为tehloader.php的php脚本，该脚本会对我的数据库进行更改。

Everything works fine but I would also like for it to refresh an include file named brain.php that is on every page. This include file has a theme feature. So if a member would change the color of the theme using edit profile, I would like the brain.php to refresh so that the color changes to what tehloader.php changed in the database when they hit save.

一切正常，但我也希望它能刷新每个页面上名为brain.php的包含文件。此包含文件具有主题功能。因此，如果成员使用编辑配置文件更改主题的颜色，我希望brain.php刷新，以便颜色更改为tehloader.php在达到保存时在数据库中更改的内容。

Here's my code.

这是我的代码。

<script language="JavaScript" type="text/javascript">
function ajax_post(){
var hr = new XMLHttpRequest();
var url = "tehloader.php?load=profile";
var nm = document.getElementById("nname").value;
var cr = document.getElementById("color").value;
var pf = document.getElementById("styled").value;
var tk = document.getElementById("token").value;
var acc = document.getElementById("access").value;
var vars = "nnname="+nm+"&nnnprofile="+pf+"&ncolor="+cr+"&acccess="+acc+"&tokken="+tk;
hr.open("POST", url, true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("status").innerHTML = return_data;
}
}
hr.send(vars);
document.getElementById("status").innerHTML = "<img src=./ajax-loader.gif>";
}
</script>

So is this possible to do? Thanks.

这可能吗？谢谢。

1 个解决方案

#1

The idea behind AJAX calls is that the server call happens in the background and the current page is not reloaded, which results in faster operation and more dynamic and responsive interfaces.

AJAX调用背后的想法是服务器调用在后台发生，并且不重新加载当前页面，这导致更快的操作和更动态和响应的接口。

When you get the return value of an AJAX call, it is the javascript calling code's responsibility to update any UI elements to reflect the changes, since the full page is not going to be reloaded.

当您获得AJAX调用的返回值时，javascript调用代码负责更新任何UI元素以反映更改，因为不会重新加载整个页面。

In your case, from what I understand, you want to reflect changes in the user's theme preferences. In this specific scenario, you should consider if you really need AJAX behaviour here, since you essentially want to refresh the whole page (with new colours etc). Depending on the amount of theming and how you implement it, you can either update the UI in javascript to the new theme (which could be tedious,possibly loading CSS on the fly and etc) or maybe consider simply refreshing the page with a full POST or GET, which would render the page server-side with the new theme settings (since your brain.php would be executed again and it would pull the most recent data from the database).

在您的情况下，根据我的理解，您希望反映用户主题首选项的更改。在这个特定的场景中，你应该考虑你是否真的需要这里的AJAX行为，因为你基本上想要刷新整个页面（使用新的颜色等）。根据主题的数量以及如何实现它，您可以将javascript中的UI更新为新主题（这可能很繁琐，可能在运行中加载CSS等）或者可以考虑使用完整的POST刷新页面或GET，它将使用新的主题设置呈现页面服务器端（因为您的brain.php将再次执行，它将从数据库中提取最新数据）。

#1