【发布时间】：2017-12-28 21:22:58
【问题描述】：
$.ajax post 方法有一些问题。
我希望我的表单在当前页面上提交表单数据，但是由于某些奇怪的原因，我的脚本正在重定向到操作页面。
请有人指出导致这种情况发生的原因以及我如何解决这个问题？
这是我的脚本：
$(document).ready(function() {
$('#OverLaySetupScreen').submit(function(e) {
e.preventDefault();
var color1 = $('#color1').val();
var color2 = $('#color2').val();
var color3 = $('#color3').val();
var color4 = $('#color4').val();
var color5 = $('#color5').val();
var bigtext = $('#bigtext').val();
var bgcolor = $('#bgcolor').val();
var lowtextcolor = $('#lowertextcolor').val();
var lowertexttext = $('#lowertextext').val();
var bgimage = $('#bgimage').val();
var bgvideo = $('#bgvideo').val();
var toggle1 = $('#toggle1').val();
var toggle2 = $('#toggle2').val();
var toggle3 = $('#toggle3').val();
var toggle5 = $('#toggle5').val();
var toggle6 = $('#toggle6').val();
var toggle7 = $('#ltoggle7').val();
var discordname = $('#discordname').val();
var discordhash = $('#discordhash').val();
$.ajax({
url: 'actions/save.php',
type: 'POST',
data: {
color1: color1,
color2: color2,
color3: color3,
color4: color4,
color5: color5,
bigtext: bigtext,
bgcolor: bgcolor,
lowtextcolor: lowtextcolor,
lowertexttext: lowertexttext,
bgimage: bgimage,
bgvideo: bgvideo,
toggle1: toggle1,
toggle2: toggle2,
toggle3: toggle3,
toggle5: toggle5,
toggle6: toggle6,
toggle7: toggle7,
discordname: discordname,
discordhash: discordhash
}
})
.done(function(data) {
var result = $.trim(data);
alert(result);
})
.fail(function() {
alert('Failed to login...');
});
});
});<form action="actions/save.php" method="post" id="OverLaySetupScreen" name="OverLaySetupScreen" pb-autologin="true" autocomplete="off" novalidate>
<table align="center" width="100%;" border="1">
<tbody>
<tr>
<td colspan="2">Event Toggle Control</td>
<td width="46%">
<div align="center">Preview</div>
<?php //<div align="right"><input type="button" value="Update Preview" onClick="preview()"></div>?>
</td>
<td width="5%">
<div align="center"><a href="javascript:;" class="btn btn-success" data-toggle="modal" data-target="#SettingsImport" id="doimport">Load Settings</a></div>
</td>
</tr>
<tr>
<td colspan="2">
<div align="left">
<font color="black">
<ul>
<li>
<input type="checkbox" <?php if($_GET[ "haloween"]=="false" ) { } else { echo "checked"; } ?> id="1toggle" name="1toggle" onChange="updatethis()"> Haloween [<a href="<?php echo $previewlnk; ?>eventpreview=Haloween" target="_blank">Preview</a>]
</li>
<li>
<input type="checkbox" <?php if($_GET[ "xmas"]=="false" ) { } else { echo "checked"; } ?> id="2toggle" name="2toggle" onChange="updatethis()"> Christmas [<a href="<?php echo $previewlnk; ?>eventpreview=Christmas" target="_blank">Preview</a>]</li>
<li>
<input type="checkbox" <?php if($_GET[ "newyear"]=="false" ) { } else { echo "checked"; } ?> id="3toggle" name="3toggle" onChange="updatethis()"> New Years [<a href="<?php echo $previewlnk; ?>eventpreview=Newyears" target="_blank">Preview</a>]
</li>
</ul>
US Based Events
<ul>
<li>
<input type="checkbox" <?php if($_GET[ "4july"]=="true" ) { echo "checked"; } else { } ?> id="5toggle" name="5toggle" onChange="updatethis()"> 4th July [<a href="<?php echo $previewlnk; ?>eventpreview=Newyears" target="_blank">Preview</a>]
</li>
</ul>
Jewish Faith Based Events
<ul>
<li>
<input type="checkbox" <?php if($_GET[ "confetti"]=="true" ) { echo "checked"; } else { } ?> id="6toggle" name="6toggle" onChange="updatethis()"> Rosh Hashanah [
<a href="<?php echo $previewlnk; ?>eventpreview=confetti" target="_blank">Preview</a>]</li>
</ul>Charity Events
<ul>
<li><input type="checkbox" <?php if($_GET[ "extralife"]=="true" ) { echo "checked"; } else { } ?> id="7toggle" name="7toggle" onChange="updatethis()"> Extra Life [<a href="<?php echo $previewlnk; ?>eventpreview=extralife" target="_blank">Preview</a>]</li>
</ul>
</font>
</div>
</td>
<td colspan="2" rowspan="9" valign="top"><iframe id="previewframe" src="<?php if($_GET[" importSettings "]) { echo $protocol . $_SERVER["SERVER_NAME "] . "https://crossfire151.gq/twitch/chottis/?chottis=false&preview=true&text=Loading&text2=Importing%20Settings "; } else { ?><?php echo $protocol . $_SERVER["SERVER_NAME "]; ?>/twitch/chottis/preview/<?php if($_GET["chottis "] == "true ") { echo "? "; } else { echo "?chottis=false& "; } ?>preview=true<?php } ?>" frameborder="0" scrolling="no" style="height: 250px; width: 100%;"></iframe></td>
</tr>
<tr>
<td colspan="2">Big Text Customization</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td width="15%">
<div align="center">Color 1</div>
</td>
<td width="34%">
<div align="center"><input class="input" onchange="preview()" type="color" value="#<?php if($_GET[" c1 "]) { echo $_GET["c1 "]; } else { echo "7E147C "; } ?>" id="color1" name="color1"></div>
</td>
</tr>
<tr>
<td>
<div align="center">Color 2</div>
</td>
<td>
<div align="center"><input class="input" onchange="preview()" type="color" value="#<?php if($_GET[" c2 "]) { echo $_GET["c2 "]; } else { echo "7C2B88 "; } ?>" id="color2" name="color2"></div>
</td>
</tr>
<tr>
<td>
<div align="center">Color 3</div>
</td>
<td>
<div align="center"><input class="input" onchange="preview()" type="color" value="#<?php if($_GET[" c3 "]) { echo $_GET["c3 "]; } else { echo "AC44AE "; } ?>" id="color3" name="color3"></div>
</td>
</tr>
<tr>
<td>
<div align="center">Color 4</div>
</td>
<td>
<div align="center"><input class="input" onchange="preview()" type="color" value="#<?php if($_GET[" c4 "]) { echo $_GET["c4 "]; } else { echo "9633A4 "; } ?>" id="color4" name="color4"></div>
</td>
</tr>
<tr>
<td>
<div align="center">Color 5</div>
</td>
<td>
<div align="center"><input class="input" onchange="preview()" type="color" value="#<?php if($_GET[" c5 "]) { echo $_GET["c5 "]; } else { echo "B13DC2 "; } ?>" id="color5" name="color5"></div>
</td>
</tr>
<tr>
<td>
<div align="center">Text</div>
</td>
<td>
<div align="center"><input class="input" onchange="preview()" type="text" value="<?php if($_GET[" text "]) { echo $_GET["text "]; } else { echo "be right back "; } ?>" id="bigtext" name="bigtext"></div>
</td>
</tr>
<tr>
<td colspan="4">Lower text customization</td>
</tr>
<tr>
<td>
<div align="center">Text</div>
</td>
<td><input class="input" onchange="preview()" type="text" value="<?php if($_GET[" text2 "]) { echo $_GET["text2 "]; } else { echo "go treat yourselves! "; } ?>" id="lowertexttext" name="lowertexttext"></td>
<td colspan="2"><a href="javascript:lowerblank()">Click here to set this text to blank</a> - This will remove the lower text completely</td>
</tr>
<tr class="ltccollumn">
<td>
<div align="center">Color</div>
</td>
<td>
<div align="center"><input class="input" onchange="preview()" type="color" value="#<?php if($_GET[" lowertextcolor "]) { echo $_GET["lowertextcolor "]; } else { echo "702E6D "; } ?>" id="lowertextcolor" name="lowertextcolor"></div>
</td>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="4">Background Customization</td>
</tr>
<tr>
<td>
<div align="center">Custom Background</div>
</td>
<td>
<div align="center"><a href="#" class="btn btn-block btn-raised btn-primary" data-toggle="modal" data-target="#myModal">Setup...</a></div>
</td>
<td colspan="2"> </td>
</tr>
<tr>
<td>
<div align="center">Background Color</div>
</td>
<td>
<div align="center"><input class="input" onchange="preview()" type="color" value="#<?php if($_GET[" bgcolor "]) { echo $_GET["bgcolor "]; } else { echo "37133C "; } ?>" id="bgcolor" name="bgcolor"></div>
</td>
<td colspan="2">
<div id="copystate"></div>
</td>
</tr>
<tr>
<td>
<div align="center"></div>
</td>
<td colspan="3">
<div align="center">
<?php if(isset($_SESSION["brb-authenticated"])) { ?>
<input class="input" onchange="preview()" type="text" id="sourceurl" value="<?php if($_GET[" importSettings "]) { } else { ?><?php echo $protocol . $_SERVER["SERVER_NAME "]; ?>/twitch/chottis/preview/<?php if($_GET["chottis "] == "true ") { echo "? "; } else { echo "?chottis=false& "; }?>c1=7e147c&c2=7c2b88&c3=ac44ae&c4=9633a4&c5=b13dc2&text2=go treat yourselves&text=be right back&chromakey=37133c&text2c=702e6d&bgimg=&bgvideo=&haloween=true&xmas=true&newyear=true&4july=false&confetti=false&extralife=false <?php } ?>" onClick="this.select(),copythis(),document.execCommand('copy');" readonly>
<?php } elseif(!isset($_SESSION["brb-authenticated"])) { ?>
<a href="#" onClick="jQuery('#discordbegin').toggle('show')" id="authclick" class="btn btn-block btn-raised btn-primary" data-toggle="modal" data-target="#Authentication">Finish Setup</a> <input type="submit" value="submit"></div>
<?php } ?>
</div>
</td>
</tr>
</tbody>
</table>
<div align="center"><input type="reset" onClick="setTimeout('preview()', 500)" value="Reset to default Settings"></div>
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog animated zoomIn animated-3x" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="zmdi zmdi-close"></i></span></button>
<h3 class="modal-title" id="myModalLabel">Custom Background</h3>
</div>
<div class="modal-body">
<center>
<p>
<label>
<input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_0" <?php if($_GET["bgvideo"]) {} else { echo "checked"; }?> onChange="radioupdate()">
Image</label>
<label>
<input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_1" <?php if($_GET["bgvideo"]) { echo "checked"; } else {} ?> onChange="radioupdate()">
Video</label>
<br>
</p>
<p id="type1">
<?php if($_GET["bgvideo"]) { ?>Please enter an video location(URL) below.<br/>This video can be from any source but <a href="https://simple.wikipedia.org/wiki/Hotlinking" target="_blank" title="What an earth is hotlinking?">hotlinking</a> must be enabled.<br/>Dropbox is supported, make sure you set "dl=1"<br/>Supported format: MP4.
<?php } else { ?>Please enter an image location(URL) below.<br/>This image can be from any source but <a href="https://simple.wikipedia.org/wiki/Hotlinking" target="_blank" title="What an earth is hotlinking?">hotlinking</a> must be enabled.<br/>Dropbox is supported, make sure you set "dl=1"<br/>Supported formats: jpg,jpeg,png,bmp,gif.
<?php } ?>
</p>
<p>
<div id="type2">
<?php if($_GET["bgvideo"]) { ?><input type="hidden" id="bgimage"><input type="text" id="bgvideo" name="bgvideo" <?php if($_GET[ "bgvideo"]) { echo 'value="' . $_GET[ "bgvideo"] . '" '; } ?>style="width: 60%">
<?php } else { ?><input type="hidden" id="bgvideo"><input type="text" id="bgimage" name="bgimage" <?php if($_GET[ "bgimage"]) { echo 'value="' . $_GET[ "bgimage"] . '" '; } ?>style="width: 60%">
<?php } ?>
</div>
<span id="type3"><?php if($_GET["bgvideo"]) { ?><br/><div align="left" style="color: red"><b>Warning: If you use a background video, the Haloween event will NOT show it's background, meaning this video will over-ride the events background.</b></div><?php } else { ?><a href="javascript:;" onClick="document.getElementById('bgimage').value="https://www.dropbox.com/s/q1w7mmyynsdri9p/transparent.png?dl=1"">Transparent Image</a><br/>Your image must be at least <b>1920x1080</b> for it to fit within the overlay.<br/><div align="left" style="color: red"><b>Warning: If you use a background image, the Haloween event will NOT show it's background, meaning this image will over-ride the events background.</b></div><?php } ?></span>
</p>
</center>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" onClick="preview()" class="btn btn-primary" data-dismiss="modal">Apply</button>
</div>
</div>
</div>
</div>
<div class="modal" id="Authentication" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog animated zoomIn animated-3x" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" onClick="AuthCancel()"><span aria-hidden="true"><i class="zmdi zmdi-close"></i></span></button>
<h3 class="modal-title" id="myModalLabel">Authentication</h3>
</div>
<div class="modal-body">
<center>
<p>
<?php //<table border="1" id="disclogin" style="display: none;">
//<tbody>
//<tr>
//<td><div align="right">Discord name:</div></td>
//<td><input type="text" name="discordname" required></td>
//<td><input placeholder="#1245" required name="discordhash" required></td>
//</tr>
//<tr>
//<td colspan="3"><button type="submit" style="border: hidden;" class="btn btn-block btn-raised btn-success" id="sub1">Save & Get my URL</button></td>
//</tr>
//<tr>
//<td colspan="3"></td>
// </tr>
//</tbody>
//</table> ?>
<div id="discordbegin" style="display: none;">
To begin you must first join our Discord Server!
<table border="0" align="center">
<tbody>
<tr>
<td><a href="http://discord.crossfire151.gq" onClick="jQuery('#discordbegin').toggle('hide'),jQuery('#adddiscord').toggle('show')" target="_blank" class="btn btn-block btn-raised btn-primary">Join Discord</a></td>
</tr>
</tbody>
</table>
<table border="0" align="center">
<tbody>
<tr>
<td><a href="javascript:;" onClick="jQuery('#discordbegin').toggle('hide'),jQuery('#adddiscord').toggle('show')" target="_blank" class="btn btn-block btn-raised btn-info">I already Joined!</a></td>
</tr>
</tbody>
</table>
</div>
<table border="1" id="adddiscord" style="display: none;">
<tbody>
<tr>
<td>
<div align="right">Discord name:</div>
</td>
<td><input type="text" name="discordname" id="discordname" required></td>
<td><input type="text" placeholder="#1245" name="discordhash" id="discordhash" required></td>
</tr>
<tr>
<td colspan="3"><button type="submit" style="border: hidden;" class="btn btn-block btn-raised btn-success" id="regthat">Whitelist my Discord name</button></td>
</tr>
</tbody>
</table>
<?php //<form>
//<table border="1" id="newname" style="display: none;">
//<tbody>
//<tr>
//<td><div align="right">Old Discord name:</div></td>
//<td><input type="text" name="olddiscordname" required></td>
//<td><input placeholder="#1245" required name="discordhash" required></td>
//</tr>
//<tr>
//<td><div align="right">New Discord name:</div></td>
//<td><input type="text" name="newdiscordname" required></td>
//<td><input placeholder="#1245" required name="newdiscordhash" required></td>
//</tr>
//<tr>
//<td colspan="3"><button type="submit" style="border: hidden;" class="btn btn-block btn-raised btn-primary" id="updatethat">Save new my Discord name</button></td>
//</tr>
//<tr>
//<td colspan="3"></td>
//</tr>
//</tbody>
//</table></form> ?>
<?php } ?>
</p>
</center>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" onClick="AuthCancel()">Cancel</button>
</div>
</div>
</div>
</div>
</form>请注意，此表单包含 PHP 功能，一旦我可以让此脚本正常工作，该功能将用于在以后获取保存的数据。
为了获得最佳效果，您可以在此处查看实时测试页面： Testing page to this script
【问题讨论】：
-
您提交此表单两次。
-
嗯？详细点好吗？
-
P.s 我已经尝试从表单标签中删除该操作，但它以相同的方式重定向，仅使用 URL 中的表单值。
-
如果您通过 ajax 发帖，真的没有理由使用表单标签 afaik，您发帖的方法在哪里？您是否将内容类型设置为您期望它返回的内容？
-
这就是 .fail 和 .success 发挥作用的地方，当信息成功发布时，页面将（最终）为用户显示新信息。
标签： javascript php jquery ajax forms