AJAX更新文本字计数器上的每个输入

时间:2017-08-20 15:59:53

标签: javascript php jquery html ajax

我正在为我的程序使用ajax jquery和php。我想在文本字段中显示我输入的每个单词,如下所示:

如果我键入"这是一个示例单词单词",输出应该是:

 editText()
        {
            id = R.id.et2
            hint = "age"
            inputType = android.text.InputType.TYPE_CLASS_NUMBER
            maxLines = 1
        }.lparams {
            below(R.id.et1)
            alignParentLeft()
            leftOf(R.id.bt1)
        }

我当前的代码只显示我在文本框中输入的内容并将其返回。  的index.html

//output
This = 1
is = 2
a = 1
sample = 2
word = 3
//end_output

,另一页被分配.php

<!DOCTYPE html>
<html>
    <head>
        <title>Working with Javascript</title>
        <script type="text/javascript" src="js/jquery-3.2.1.min.js">
</script>
    </head>

    <body>
        <input type="text" name="input" id="textInput" autofocus/>
        <div id="content"></div>
    </body>
    <script type="text/javascript">
        var textInput = document.getElementById("textInput");
        var jTextInput = $("#textInput");
        var divSelector = document.getElementById("content");
        textInput.onkeyup = function () {
            console.log($("#textInput").val());
            $.ajax({
                "method": "POST", //to specify what type of METHOD to 
 REQUEST in the SERVER (GET or POST)
                "url": "assigned.php", // where to send the request
                "dataType": "JSON", // datatype of the request
                "data": {
                    "text": $("#textInput").val()
                }, //DATA values that you'll sebd
                success: function (res) {
                    $("#content").html(res.reversedString);
                }
            });
        };
    </script>    
</html>

我对php有一个想法,它看起来像这样

<?php

$var = array("reversedString" => $_POST['text']);

echo json_encode($var);
?>

但是我不知道在哪里放它以及它如何工作以及它是否起作用。我更喜欢把它放在assigned.php上。谢谢你的帮助:)

1 个答案:

答案 0 :(得分:1)

实际上你只需要将这些代码放在assigned.php中,它就会以纯文本形式发送,然后前端可以获取它们并将其附加到html中。

但是,Web开发数据中更多可能会在前端和后端之间作为JSON传输,解析数据的任务属于前端。所以你可以考虑改变在PHP上返回JSON数据的方式。如果你想在php中发送JSON,只需设置标题header('content-type: application/json')