javascript - 在加载存储在另一个文件中的消息内容时，在ajax中进行验证

Question

用于将数据插入数据库的ajax脚本

<script type="text/javascript">
$(function() {
$(".submit_button").click(function() {
var textcontent = $("#content").val();
var dataString = 'content='+ textcontent;
if(textcontent=='')
{
alert("Enter some text..");
$("#content").focus();
}
else
{
$("#flash").show();
$("#flash").fadeIn(400).html('<span class="load">Loading..</span>');
$.ajax({
type: "POST",
url: "action.php",
data: dataString,
cache: true,
success: function(html){
$("#show").after(html);
document.getElementById('content').value='';
$("#flash").hide();
$("#content").focus();
}  
});
}
return false;
});
});

HTML 内容

<div class="container">
<div id="myDiv">

<div class="main">
<form  method="post" name="form" action="">
<textarea style="width:500px; font-size:14px; height:60px; font-weight:bold; resize:none;" name="content" id="content" ></textarea><br />
<input type="submit" value="Post" name="submit" class="submit_button" onclick="loadXMLDoc()"/>
</form>
</div>
<div class="space"></div>
<div id="flash" align="left"  ></div>
<div id="show" align="left"></div>
</div>
</div>

加载消息的脚本:

<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
   {
  document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
 }
 }
xmlhttp.open("GET","ajax.txt",true);
xmlhttp.send();
}

ajax.txt

message sent

所以问题是，这里验证工作正常，但是如果我提交表单，则会出现验证警报，同时发送的消息(ajax.txt)也会加载并显示消息..我想要，如果验证出现警报，不应发布表单。提前谢谢您

Answer 1

<script type="text/javascript">
$(function() {
$(".submit_button").click(function() {
var textcontent = $("#content").val();
var dataString = 'content='+ textcontent;
if(textcontent=='')
{
alert("Enter some text..");
$("#content").focus();
}
else
{
$("#flash").show();
$("#flash").fadeIn(400).html('<span class="load">Loading..</span>');
$.ajax({
type: "POST",
url: "action.php",
data: dataString,
cache: true,
success: function(html){
    loadXMLDoc();
$("#show").after(html);
document.getElementById('content').value='';
$("#flash").hide();
$("#tohide").hide();
}  
});
}
return false;
});
});
</script>

这是您的 HTML

<div class="container">
<div id="myDiv">

<div class="main" id="tohide">
<form  method="post" name="form" action="">
<textarea style="width:500px; font-size:14px; height:60px; font-weight:bold; resize:none;" name="content" id="content" ></textarea><br />
<input type="button" value="Post" name="submit" class="submit_button" />
</form>
</div>
<div class="space"></div>
<div id="flash" align="left"  ></div>
<div id="show" align="left"></div>
</div>
</div>

加载消息的脚本

<script>
function loadXMLDoc()
{
var validation=document.getElementById("content").value;
if(validation=="")
{
    alert("Enter some text..");
$("#content").focus();
}
else
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    $("#tohide").css("display", "none");;
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","ajax.txt",true);
xmlhttp.send();
}
}
</script>