ajax调用后使用jQuery插入记录不起作用

Posted

技术标签:

【中文标题】ajax调用后使用jQuery插入记录不起作用【英文标题】:Insert record using jQuery after ajax call doesn't work 【发布时间】:2011-09-29 19:14:18 【问题描述】:

我有一个插入和加载记录(jQuery 和 php)脚本可以在不使用 AJAX 的情况下正常工作。但是在 AJAX 调用之后,插入(jQuery)不起作用。

这是我的代码:-

$(".insert").live("点击",function() var boxval = $("#content").val(); var dataString = '内容='+ boxval; 如果(boxval=='') alert("请输入一些文字"); 别的 $.ajax( 类型:“发布”, 网址:“demo.php”, 数据:数据字符串, 缓存:假, 成功:函数(html) $("table#update tbody").prepend(html); $("table#update tbody tr").slideDown("slow"); document.getElementById('content').value=''; ); 返回假; ); $(".load").live("点击",function() $.ajax( 类型:“发布”, 网址:“test.php”, 成功:功能(味精) $("#container").ajaxComplete(function(event, request, settings) $("#container").html(msg); ); ); ); );

【问题讨论】:

使用 firebug 检查您的请求发生了什么。 在我使用 json 的 jQuery AJAX 脚本中,我们必须指定字段的 ID,例如 $.('#input1').val();所以 jQuery 知道它正在提交什么。这将在指定缓存属性后进入 AJAX 调用。我现在没有工作代码,但如果你以后仍然卡住,我可以发布我拥有的代码。 感谢您的回复,在萤火虫响应中是 name 没关系 【参考方案1】:

绝对建议使用您的浏览器开发工具来检查提交的确切请求,并首先查看是否存在问题。

您可能还想更改将 dataString 传递给 ajax 请求的方式。

如果你的 boxval 中有一个“&”,那么你最终会得到一个格式不正确的字符串。因此,请尝试将数据初始化为:

var data = ;
data.content = boxval;

这将要求 jQuery 为您转义值。

【讨论】:

【参考方案2】:

我很想看看您的表单标记和后端 PHP 代码;它可能会提供线索。

通常我会有一个名为“action”的表单变量,只是为了告诉 PHP 代码我想要它做什么(特别是如果 PHP 脚本是一个对象上许多不同操作的控制器)。类似<input type="hidden" name="action" value="insert"/> 甚至多个<input type="submit" name="action"/> 按钮,每个按钮都有不同的值。在 PHP 代码中,我会有类似的内容:

switch ($_POST['action']) 
    case 'insert':
        // insert record and send HTML
    break;
    // other actions

如果你做过这样的事情,也许 PHP 正在寻找一个不存在的变量。

由于无法查看您的代码,我强烈推荐使用非常方便的 jQuery 表单插件 http://jquery.malsup.com/form/ 。它允许您将表单转换为 AJAX 表单,正确格式化您的数据,并且不会忘记来自任何表单元素的数据(除了未单击的 <input type="submit"/> 按钮,这与非 AJAX 形式的展品)。它就像标准的$.ajax() 方法一样工作。

【讨论】:

【参考方案3】:

我解决了问题

我替换了这段代码

$("#container").ajaxComplete(function(event, request, settings) $("#container").html(msg); );

$("#container").html(msg);

非常感谢您的回答

【讨论】:

【参考方案4】:
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->  
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<script type="text/javascript">
           $(document).ready(function() 
     $('.clicker').click(function()
         var fname = $('.fname').val();
         var lname = $('.lname').val();
     var message=$('.message').val();   
  $.ajax(
    type:"POST",
    url: "submit.php",
     cache:false,
    data: "fname="+fname+"&lname="+lname+"&message="+message,
    success: function(data)
            $(".result").empty();
             $(".result").html(data);
        
    );
   return(false);
         );
   );
        </script>
    </head>
    <body>
        <div>Data Form</div>
       <form id="form1" name="form1" method="post" action="">
    <input name="fname" type="text" class="fname" size="20"/><br />
    <input name="lname" type="text" class="lname" size="20"/><br />
    <div class="result"><textarea name="message" rows="10" cols="50" class="message">    </textarea></div>
        <input type="button" value="calculate" class="clicker" />
    </form>
    </body>
</html>

提交.php

<?php
$con=mysql_connect("localhost","root","");
mysql_select_db("ajaxdb",$con);

$fname=$_REQUEST['fname'];
$lname=$_REQUEST['lname'];
$message=$_REQUEST['message'];

$sql="insert into person(fname,lname,message) values('$fname','$lname','$message')";
mysql_query($sql) or die(mysql_error());

echo "The data has been submitted successfully.";
?>

【讨论】:

以上是关于ajax调用后使用jQuery插入记录不起作用的主要内容,如果未能解决你的问题,请参考以下文章

完整功能中的ajax调用后刷新jquery mobile listview不起作用

ajax调用HTML内容更改后select2 jquery插件不起作用

Ajax 在 JQuery 表单插件中不起作用

在ajax调用中附加tbody后点击事件不起作用?

使用 Jquery 的同步“Ajax”调用似乎不起作用

为啥我的 Jquery Ajax 调用不起作用?(Asp.net MVC C#)