AJAX 内联编辑：将 PHP 更新添加到新更改

发布于 2024-08-22 04:50:03 字数 964 浏览 13 评论 0原文

我正在开发一个主页，并将使用 AJAX 内联编辑脚本供管理员使用，以使其尽可能简单。我一直在使用的脚本是 this 它几乎拥有我想要的内联所有内容编辑脚本。当我要捕获新的更改并将它们发送到 PHP 函数，该函数将使用这些新更改更新我的数据库时，我的问题就出现了。

我没有太多使用 AJAX 和 PHP 的经验，所以我有点迷失，但我尝试了我发现的代码：

$.ajax({
  type: "POST",
  url: "update_handler.php",
  data: "newfieldvalue=" + newValue,
  success: function(msg){
    alert( "Data Saved: " + msg );
  }
});

问题是我不太知道如何或在哪里实现此代码，或者它是否甚至使用正确的代码。为了向您展示代码，我附加了两个 txt 文档：

Index.php .txt

和

Jquery.editableText.js.txt

在 index.php.txt 中是索引页面，它从数据库检索我的数据并使用一些 jQuery 代码。 jQuery.editableText.js.txt 中是具体的 jQuery 代码。我猜 PHP 处理程序页面非常标准，采用正确的字段，然后在数据库中更新它。

原文

I’m working on a homepage and will use an AJAX inline editing script for the admin to make it as simple as possible.
The script I’ve been using is this and it has almost everything I wanted from an inline editing script. My problem arises when I’m going to capture the new changes and send them to a PHP function which will update my database with those new changes.

I don’t have that much experience with AJAX and PHP together so I’m somewhat lost but I’ve tried a code I found:

$.ajax({
  type: "POST",
  url: "update_handler.php",
  data: "newfieldvalue=" + newValue,
  success: function(msg){
    alert( "Data Saved: " + msg );
  }
});

The problem is that I don’t quite know how or where to implement this code or if it’s even the right code to use. To show you the code I’ve attached two txt documents:

Index.php.txt

And

Jquery.editableText.js.txt

In index.php.txt is the index page where it retrieves my data from the database and uses a bit of jQuery code. In the jQuery.editableText.js.txt is the concrete jQuery code. I guess that the PHP handler page is pretty much standard with taking the correct field and then update it in the database.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

空城缀染半城烟沙 2024-08-29 04:50:03

我有问题要问你：

$menuID 包含某个东西的 id，你可以用它通过这个 ID 从表中获取它。这是对的吗？

如果正确，您必须将此 ID 传递到 PHP 处理程序页面。

示例：

index.php：

<script type="text/javascript">
jQuery(function($){
    $('h2.editableText, p.editableText').editableText({
        newlinesEnabled: false
    });

    $.editableText.defaults.newlinesEnabled = true;

    $('div.editableText').editableText();

    $('.editableText').change(function(){
        var newValue = $(this).html();

        // important code:
          $.ajax({
          type: "POST",
          url: "save.php",
          data: { val : newValue, key:$(this).parent().tagName, id:$(this).parent().attr('class')},
          success: function(msg){
            alert( "Data Saved: " + msg );
          }
       });

    });

});
</script>

和正文部分：

<body>
<div id="wrapper">
<div id="content">
    <?php 
    $isnull = getContent($menuID, "title");
    if ($isnull != "") {

    echo "<h2 class=\"editableText\"><center><p>" . getContent($menuID, "title") . "</p></center></h2><br>";
    } else {
        null;
    }
    ?>

    <div class="editableText">

<p class="<?php echo $menuID?>"><?php echo getContent($menuID, "maincontent");?></p>
        </div>
    </script>
    <?php

    mysql_close($connection);
?>

还有一个，save.php：

<?php

# content that you send from client; you must save to maincontent
$content=$_POST['val'];

# $from=='div' if it from maincontent or $from=='center' if it from title
$from=$_POST['key'];


# id of your post 
$id=$_POST['id'];

    #here you can save your content;
?>

I have questions for you:

$menuID contains the id of something and you use it to fetch it from table by this ID. It's right?

If it's right you must pass this ID to the PHP handler page.

Example:

index.php:

<script type="text/javascript">
jQuery(function($){
    $('h2.editableText, p.editableText').editableText({
        newlinesEnabled: false
    });

    $.editableText.defaults.newlinesEnabled = true;

    $('div.editableText').editableText();

    $('.editableText').change(function(){
        var newValue = $(this).html();

        // important code:
          $.ajax({
          type: "POST",
          url: "save.php",
          data: { val : newValue, key:$(this).parent().tagName, id:$(this).parent().attr('class')},
          success: function(msg){
            alert( "Data Saved: " + msg );
          }
       });

    });

});
</script>

and body part:

<body>
<div id="wrapper">
<div id="content">
    <?php 
    $isnull = getContent($menuID, "title");
    if ($isnull != "") {

    echo "<h2 class=\"editableText\"><center><p>" . getContent($menuID, "title") . "</p></center></h2><br>";
    } else {
        null;
    }
    ?>

    <div class="editableText">

<p class="<?php echo $menuID?>"><?php echo getContent($menuID, "maincontent");?></p>
        </div>
    </script>
    <?php

    mysql_close($connection);
?>

and one more, save.php:

<?php

# content that you send from client; you must save to maincontent
$content=$_POST['val'];

# $from=='div' if it from maincontent or $from=='center' if it from title
$from=$_POST['key'];


# id of your post 
$id=$_POST['id'];

    #here you can save your content;
?>

回复收藏 0 原文

你是暖光i 2024-08-29 04:50:03

正如 edit-in-page 页面上所述，您应该在脚本块。所以你几乎已经拥有了。以下应该有效（未经测试）。

<script type="text/javascript">
    jQuery(function($){
        $('h2.editableText, p.editableText').editableText({
            newlinesEnabled: false
        });

        $.editableText.defaults.newlinesEnabled = true;

        $('div.editableText').editableText();

        //  bind an event listener that will be called when
        //  user saves changed content
        $('.editableText').change(function(){
             var newValue = $(this).html();

             // do something
             // For example, you could place an AJAX call here:
            $.ajax({
              type: "POST",
              url: "update_handler.php",
              data: "newfieldvalue=" + newValue,
              success: function(msg){
                alert( "Data Saved: " + msg );
              }
           });
        });

    });
</script>

As it says on the edit-in-page page you should be using that code within a script block. So you pretty much had it. The following should work (untested).

<script type="text/javascript">
    jQuery(function($){
        $('h2.editableText, p.editableText').editableText({
            newlinesEnabled: false
        });

        $.editableText.defaults.newlinesEnabled = true;

        $('div.editableText').editableText();

        //  bind an event listener that will be called when
        //  user saves changed content
        $('.editableText').change(function(){
             var newValue = $(this).html();

             // do something
             // For example, you could place an AJAX call here:
            $.ajax({
              type: "POST",
              url: "update_handler.php",
              data: "newfieldvalue=" + newValue,
              success: function(msg){
                alert( "Data Saved: " + msg );
              }
           });
        });

    });
</script>

回复收藏 0 原文

~没有更多了~