Question

关于StackOverflow的第一个问题，所以我希望我能做到这一点。我有一个JS函数的AJAX调用：

function addOptionText(str)
{

    if (window.XMLHttpRequest) {
       // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("0").innerHTML = xmlhttp.responseText;
        }
    };
    xmlhttp.open("GET","AddText.php?q="+str,true);
    xmlhttp.send();

}

这是我的HTML代码：

<body>
    <FORM NAME ="form6" onclick= "addOptionText(this.value)" >
        Text Input:
        <INPUT TYPE = "TEXT" VALUE placeholder ="Nume Field" NAME ="Text_Field">
        <INPUT TYPE = "Submit" Name = "Edit" VALUE = "Add" >

    </FORM>
    <p id="0"> </p>
</body>

php文件只包含：

<html>
    <body>

       <?php
            $name = ($_GET['q']);
            echo "nume";
       ?>
    </body>
</html>

但该功能似乎没有被使用，因为段落没有改变。这里是php的新手，并试图了解它是如何工作的，所以我认为某些东西可能会让我失望。

EDIT 我有不止一个＆＃34;提交＆＃34;这就是为什么它不起作用的原因。我改变了＃34;提交＆＃34;从现在开始，现在所有人都按预期工作。

Answer 1

不幸的是，你的代码到处都是。

<FORM NAME ="form6" onclick= "addOptionText(this.value)" >出于多种原因是错误的。首先，我们不会在表单上使用onclick，而是使用提交按钮。其次，您在参数中输入的值不以任何方式表示文本框的值。
由于您只想显示文本框的值而不想导航到其他页面，因此请修改<form>标记，使其不具有action = "some page"属性，因为这样它会自动将你重定向到你指定的页面，因此AJAX请求变得无用。而是修改您的标记，使其看起来像这样：
<form name = "form6" onsubmit = "return false;">

如果您使用type= "submit"事件指定要提交的输入/按钮类型：onsubmit并将其设置为return false会阻止表单将您发送到新页面。
使用Vanilla JavaScript而非jQuery时，我认为使用ID更有效率，以便在JavaScript中更容易识别HTML元素。
您的PHP代码根本没有任何意义。 在执行任何其他操作之前，您需要评估是否确实将q发送到使用GET方法的PHP文件。为此，请在您的php文件中使用：
if (isset($_GET["q"])):
// Your code
endif;

您编写的行echo "nume"将输出“nume”，无论您使用AJAX请求实际发送到您的php文件的是什么。
在我看来，仍然无法为Internet Explorer 5 and 6提供支持。没有多少人使用它，除非出于任何原因他们在精神上受到约束。

分析，您的文件应该如何：

<强> HTML ：

<body>
    <form name = "form6" onsubmit = "return false;">
        Text Input:
        <input type = "TEXT" placeholder ="Nume Field" id = "textfield" name = "Text_Field"/>
        <input id = "submit" type= "submit" Name = "Edit" value= "Add"/>
    </form>
    <p id = "0"> </p>
    <script src = "YOUR JAVASCRIPT FILE" type = "text/javascript"></script>
</body>

<强>的JavaScript ：

var textfield = document.getElementById("textfield");
var submit = document.getElementById("submit");

submit.onclick = function() {
    'use strict';
    var xmlhttp;

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }
    else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
            document.getElementById("0").innerHTML = xmlhttp.responseText;
        }
    };

    xmlhttp.open("GET", "AddText.php?q=" + textfield.value, true);
    xmlhttp.send();
};

<强> PHP ：

<?php
    if (isset($_GET["q"])):
        echo ($_GET["q"]);
    endif;
?>

没有调用Ajax Javascript函数

1 个答案: