奇怪的javascript表单行为答案

【问题标题】：strange javascript form behaviour奇怪的javascript表单行为
【发布时间】：2009-04-09 04:59:11
【问题描述】：

我正在用这个 php 生成以下 html 表单：

echo "<form name=\"userForm\">
Username:
<input type=\"text\" name=\"username\" />
<br />
First name:
<input type=\"text\" name=\"firstname\" />
<br />
Last name:
<input type=\"text\" name=\"lastname\" />
<br />
<input name=\"Submit\" type=\"submit\" value=\"Update\" onclick=\"submitUserInfo();return false\"/>
</form>";

由submitUserInfo处理，这里是：

function submitUserInfo() {
    url = "edit_user.php?cmd=submitinfo&username="+document.userForm.username.value+"&firstname="+document.userForm.firstname.value+"&lastname="+document.userForm.lastname.value;
    var xmlHttp=GetXmlHttpObject();
    if(xmlHttp.responseText == 'true') {
        alert(url);
        xmlHttp.open("GET",url,true);
        xmlHttp.send(null);
        //updateByUser(username);
    }
}

我明确将 url 定义为以

开头

edit_user.php?cmd=submitinfo&username

但是，当按下提交按钮时，它会尝试将 url 发送为

edit_user.php?username=

我不知道为什么。我已经成功地将上述技术与我网站上的其他表单一起使用，但找不到任何排除 cmd=submitinfo& 的原因。

【问题讨论】：

什么是 GetXmlHttpObject 实现？对 responseText == 'true' 的检查是什么？如果您尝试将 url 设为本地 (var url = "...";) 会发生什么？如果在构建之后显示 url 会发生什么？如果在调用 GetXmlHttpObject 之后显示它会发生什么？

标签： php javascript html ajax

【解决方案1】：

使用像 Firebug 这样的工具来确定浏览器是否在没有 cmd=submitinfo& 的情况下发送它，或者它是否在服务器端丢失。

【讨论】：

显示 url 是否同样有用以查看我是否在客户端发送它？
在哪里显示？您需要从问题的根源开始，看看它是否能够通过它发送到的第一个位置——从浏览器。

【解决方案2】：

变化：

url = "edit_user.php?cmd=submitinfo&username="+document.userForm.username.value+"&firstname="+document.userForm.firstname.value+"&lastname="+document.userForm.lastname.value;

到：

var url = "edit_user.php?cmd=submitinfo&username="+document.userForm.username.value+"&firstname="+document.userForm.firstname.value+"&lastname="+document.userForm.lastname.value;

您必须在尝试使用之前声明您的 url 变量。

另外，避免echo将 HTML 直接发送到页面。你这样做的方式对于调试、更新和风格化来说绝对是一件痛苦的事情。

【讨论】：

评论html的首选方法是什么？
首选方法是根本不评论，而是把HTML放在页面本身上

【解决方案3】：

像jQuery 这样的框架对于这些简单的任务来说并不是真正需要的，但如果你打算在你的网站上实现更多的 JavaScript，我建议你看看。

您使用 jQuery 的代码如下所示：

$("#<id of form goes here>").submit(function ()
{
    $.ajax({
        data: {
            "username": $("#<id of username-input goes here>").val(),
            "firstname": $("#<id of firstname-input goes here>").val(),
            "lastname": $("#<id of lastname-input goes here>").val()
        },

        url: "edit_user.php"
    });

    return false;
});

我认为看起来更好一些 :)

还;使用框架 - 不是特别是 jQuery - 负责浏览器解决方法.. 所以你不必.. 照顾他们，也就是说:)

【讨论】：

【解决方案4】：

我认为您需要将按钮的类型从“提交”更改为“按钮”：

<input name=\"Submit\" type=\"button\" value=\"Update\" onclick=\"submitUserInfo();return false\"/>

【讨论】：