Question

我正在尝试在表单中使用jQuery Ajax来提交...

以下是该页面的完整代码：

<?php
if(isset($_POST['save'])) {
    print "<pre>";
    print_r($_POST);
    print "</pre>";
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>






<!-- TinyMCE -->
<script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
    tinyMCE.init({
        // General options
        mode : "textareas",
        theme : "advanced",
        plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount",

        // Theme options
        theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
        theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
        theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
        theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,

        // Example content CSS (should be your site CSS)
        content_css : "css/content.css",

        // Drop lists for link/image/media/template dialogs
        template_external_list_url : "lists/template_list.js",
        external_link_list_url : "lists/link_list.js",
        external_image_list_url : "lists/image_list.js",
        media_external_list_url : "lists/media_list.js",

        // Replace values for the template plugin
        template_replace_values : {
            username : "Some User",
            staffid : "991234"
        }
    });
</script>
<!-- /TinyMCE -->

</head>
<body>

<form id="my_form" method="post" action="insert.php">
    <div>
        <h3>Edit Page</h3>



        <!-- Gets replaced with TinyMCE, remember HTML in a textarea should be encoded -->
        <div>
            <textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%">
<?php
$con = mysql_connect('localhost', 'root', 'dev');
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }
mysql_select_db("my_db");
$query = "SELECT * FROM pages where id=1";
$result = mysql_query($query);
$row = mysql_fetch_assoc($result);
$contents = $row['content'];
echo $contents;
?>
            </textarea>
        </div>

        <br />
        <input id="submit_page_changes" type="submit" name="save" value="Submit" />
        <input type="reset" name="reset" value="Reset" />
    </div>
</form>

<script>
    $(document).ready(function(){
        $('#my_form').submit(function(event) {
            event.preventDefault();
            alert($(this).serialize());
        });
    });
</script>



</body>
</html>

基本上我需要使用JQuery Ajax提交它。

编辑：

以下是insert.php的代码

<?php
$con = mysql_connect("localhost","root","dev");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }
mysql_select_db("my_db");


$sql="UPDATE pages SET content=('$_POST[elm1]') WHERE id='1'";

if (!mysql_query($sql,$con))
  {
  die('Error: ' . mysql_error());
  }
echo "1 record added";


$query = "SELECT * FROM pages where id=1";
$result = mysql_query($query);
$row = mysql_fetch_assoc($result);
$contents = $row['content'];

echo $contents;

mysql_close($con)
?>

Answer 1

Satch，

首先，你需要在$（document）.ready函数中插入提交脚本，如下所示：

<script>
    $(document).ready(function(){
        $("#my_form").submit(function() {

            $.ajax({
                type: 'post',
                url: 'insert.php',
                contentType: "application/json",
                data:$(this).serialize(),
                dataType: "json",
                success: function (msg) {
                    alert(msg);
                  },
                error: function(msg){
                    alert("Error" + msg);
                }
            });

          return false;
        });
    });
</script>

您还需要通过jquery ajax函数（如$ .ajax）发布序列化数据。我希望这会有所帮助。

Answer 2

您应该使用$.ajax方法

Answer 3

不要返回false，请尝试使用preventdefault：

<script>
$('#my_form').submit(function(event) {
  event.preventDefault();
  alert($(this).serialize());
});
</script>

编辑：要包括Eduardo的上述提示，这是一个更广泛的答案：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<form id="my_form" method="post" action="insert.php">
    <input type="submit" name="save" value="Submit" />
</form>

<script>
    $(document).ready(function(){
        $('#my_form').submit(function(event) {
            event.preventDefault();
            alert($(this).serialize());
        });
    });
</script>

有几点需要注意： - 您应该在页面顶部包含查询库（最好是头部） - 您应该首先包含HTML，然后是使用HTML的脚本（否则JS不知道该元素） - 如果必须在HTML上面添加JS，请使用$(document).ready()，因为在将任何事件处理程序附加到它之前，它将确保所有HTML都是DOM的一部分。 - 如果您已在页面上使用jQuery，则使用event.preventDefault();比return false;稍微安全一些。

Answer 4

这段代码可以解决问题：

$('#my_form').submit(function(event) {
    event.preventDefault(); 
    $.post("insert.php", $("#my_form").serialize(), function (response) {
        //do something on success
    });

});

或尝试使用以下代码将数据发布到后端：

$.post("insert.php", {'elm1' : $('#elm1').val()}, function (response) { 
    //do something on success
});

由于您使用tinyMCE进行textarea＃elm1使用：

$.post("insert.php", {'elm1' : tinyMCE.get('elm1').getContent()}, function (response) { 
    //do something on success
});

Answer 5

$.ajax({
type: 'post',
url: 'insert.php',
contentType: "application/json; charset=utf-8",
data:{'id':id}
dataType: "json",
beforeSend: function () {
//show wait
},
success: function (msg) {
    if (msg.d != null) {
    //result is obtained
    }
  }
});

Answer 6

编辑：您可以在该功能中使用$ .ajax，以便发布数据

修改您的代码，如：

<script>
$('input[name=save]').click(function(e)
{
  alert($('#my_form').serialize());
  return false; // You can also use e.preventDefault();
});
</script>

使用JQuery Ajax提交表单仍然显示目标页面

6 个答案: