Question

我在ajax上练习。我不知道是什么，或者怎么做。这是我第一次这样做。这是我的代码。

<?php
function save() {
  // mysql connection

  $text = $_POST['name'];

  // insert query
}
?>

<input type="text" name="name" onchange="<?php save() ?>" value="default">

我想要做的就是这样。输入类型文本内部有默认文本。然后如果我改变它会自动保存。我怎么能这样做？

Answer 1

简答：您无法通过JavaScript调用PHP函数，因此您尝试它的方式不起作用。

答案很长：您需要找到对AJAX的介绍并了解它。为了做你所描述的，你需要：

在JavaScript中实例化XMLHttpRequest对象
告诉它在服务器将调用PHP脚本的某个URL上联系服务器
告诉它通过POST
以这样的方式编写PHP脚本，即保存文本并返回true / false之类的内容以表示成功/失败
回到JavaScript中，在响应时处理响应，例如：通过显示消息“消息已保存”或“消息无法保存：（错误消息）”，具体取决于是否成功。

Answer 2

我不知道你是否应该这样保存。

你可能想要事件onblur()，或者更好的是，通过JavaScript添加事件，不要使用内联属性。

但最大的问题是你试图从JavaScript调用PHP函数。 JavaScript无法像这样与PHP交互。考虑客户端/服务器关系以及代码的运行位置。

您需要调用一个JavaScript函数，该函数发送PHP可以用来写入数据库的输入value。

Answer 3

我认为你需要首先理解AJAX的概念。

试试这个。 http://www.w3schools.com/ajax/ajax_intro.asp

给你一个简单的想法; 想象一下，有一个虚构的<FORM> tag，其中有一个方法，动作和数据要提交。在您的情况下，输入的onchange事件触发此<FORM>的“SUBMIT”，假设您已设置要提交的数据的值。发生这种情况时，页面不会刷新或重定向。相反，javascript创建一个“单独的进程线程”，就像在不同的“窗口”中提交<FORM>一样。因此，术语“异步”。

AJAX更像是一个Javascript的东西。

Answer 4

您可以通过多种方式创建AJAX调用。最简单的方法是使用Mootools或JQuery等Javascript框架。 Ajax这种方式很简单。点击http://demos111.mootools.net/Ajax.Form查看Mootools演示，然后点击http://docs.jquery.com/Tutorials。

逻辑非常简单。添加事件到文本框以在值更改后保存框。您的事件函数将生成Ajax请求并将其发送到服务器，接收响应，您可以使用该响应让用户知道保存事件的状态（如果您选择）。

这是我为你写的快速的事情，可能有助于理解。将需要包括Mootools库。可能有bug，但Ajax调用的概念就在那里。页= index.php

<?php
//  PHP before anything else...
//
//  Check to see if task is specified and need to save changes
if (isset($_POST['task']) && $_POST['task'] == 'save') {
    // mysql connection
    $text = $_POST['name'];
    // insert query
    $isSuccess = 'Status of SAVING CHANGES';

    //  Output... output will be used by 'update' to set value of <div id="log">...</div>
    //  so user knows what is happening
    echo $isSuccess ? 'Successfully Saved' : 'Failed to Save';
    exit();
}
?>
<html>
    <head>
        <!--    NEED TO INCLUDE MOOTOOLS LIBRARY -->
        <script type="text/javascript">
            window.addEvent('domready', function(){
                $('name').addEvent('blur', saveChanges);

                /**
                 * Generates request and saves changes
                 */
                function saveChanges(){

                    //  URL which will be called
                    var url = "index.php";

                    //  New Ajex request. Note that it will be sent because of .request() at the end
                    new Ajax(url, {
                        //  Method : post/get
                        method: 'post',

                        //  Data to be passed 
                        data :{
                            name : $('name').value,
                            task : 'save'
                        },

                        //  Output of the AJAX will be set to this element
                        update: $('log')

                    }).request();
                }
            });
        </script>

    </head>
    <body>
        <form action="index.php" onsubmit="return false">
            <div id="log"></div>
            <!-- SOME CONTENT ... -->
            <input type="text" name="name" id="name" value="">
        </form>
    </body>
</html>

AJAX问题自动保存

4 个答案: