[英]Submitting a form with Ajax generated by PHP
我正在尝试使此Ajax正常运行,但不返回任何内容! 我已经尝试了很长时间,但是很沮丧。 我没有任何回报。
我正在使用PHP生成下面的HTML和Ajax,因此这是产生无效Ajax的脚本的输出。
<div id='imageOptionsDiv1' name='imageOptionsDiv1'>
<p>Convert This Image</p>
<p>Specify Filename: <input type="text" id='userphotofilename1' name='userphotofilename1' value='HonestRepairSmallLogo_png'>
<select id='photoextension1' name='photoextension1'>
<option value="">Select Format</option>
<option value="jpg">Jpg</option>
<option value="bmp">Bmp</option>
<option value="png">Png</option>
</select></p>
<p>Width and height: </p>
<p><input type="number" size="4" value="0" id='width1' name='width1' min="0" max="10000"> X <input type="number" size="4" value="0" id="height1" name="height1" min="0" max="10000"></p>
<p>Rotate: <input type="number" size="3" id='rotate1' name='rotate1' value="0" min="0" max="359"></p>
<input type="submit" id='convertPhotoSubmit1' name='convertPhotoSubmit1' value='Convert Image'>
<script type="text/javascript">
$(document).ready(function () {
$('#convertPhotoSubmit1').click(function() {
var rot = $('rotate1').val();
var wid = $('width1').val();
var hgt = $('height1').val();
var pext = $('photoextension1').val;
var upfn = $('userphotofilename1').val;
$.ajax({
url: 'convertCore.php',
type: "POST",
data: {
rotate:rot,
width:wid,
height:hgt,
photoextension:pext,
userphotofilename:upfn},
success: function(data) {
alert("convertGui2.php"); },
error: function(data) {
alert("Cannot convert this file!"); }
});
});
});
</script>
</div>
根据要求,这是生成上述代码的PHP部分。
if (in_array($extension, $ImageArray1)) {
?>
<div id='imageOptionsDiv<?php echo $ConvertGuiCounter1; ?>' name='imageOptionsDiv<?php echo $ConvertGuiCounter1; ?>' style="max-width:750px; display:none;">
<p style="max-width:1000px;"></p>
<p>Convert This Image</p>
<p>Specify Filename: <input type="text" id='userphotofilename<?php echo $ConvertGuiCounter1; ?>' name='userphotofilename<?php echo $ConvertGuiCounter1; ?>' value='<?php echo str_replace('.', '_', $File); ?>'>
<select id='photoextension<?php echo $ConvertGuiCounter1; ?>' name='photoextension<?php echo $ConvertGuiCounter1; ?>'>
<option value="">Select Format</option>
<option value="jpg">Jpg</option>
<option value="bmp">Bmp</option>
<option value="png">Png</option>
</select></p>
<p>Width and height: </p>
<p><input type="number" size="4" value="0" id='width<?php echo $ConvertGuiCounter1; ?>' name='width<?php echo $ConvertGuiCounter1; ?>' min="0" max="10000"> X <input type="number" size="4" value="0" id="height<?php echo $ConvertGuiCounter1; ?>" name="height<?php echo $ConvertGuiCounter1; ?>" min="0" max="10000"></p>
<p>Rotate: <input type="number" size="3" id='rotate<?php echo $ConvertGuiCounter1; ?>' name='rotate<?php echo $ConvertGuiCounter1; ?>' value="0" min="0" max="359"></p>
<input type="submit" id='convertPhotoSubmit<?php echo $ConvertGuiCounter1; ?>' name='convertPhotoSubmit<?php echo $ConvertGuiCounter1; ?>' value='Convert Image' onclick="toggle_visibility('loadingCommandDiv');">
<script type="text/javascript">
$(document).ready(function () {
$('#convertPhotoSubmit<?php echo $ConvertGuiCounter1; ?>').click(function() {
var rot = $('#rotate<?php echo $ConvertGuiCounter1; ?>').val();
var wid = $('#width<?php echo $ConvertGuiCounter1; ?>').val();
var hgt = $('#height<?php echo $ConvertGuiCounter1; ?>').val();
var pext = $('#photoextension<?php echo $ConvertGuiCounter1; ?>').val;
var upfn = $('#userphotofilename<?php echo $ConvertGuiCounter1; ?>').val;
$.ajax({
url: 'convertCore.php',
type: "POST",
data: {
rotate:rot,
width:wid,
height:hgt,
photoextension:pext,
userphotofilename:upfn},
success: function(data) {
alert("convertGui2.php"); },
error: function(data) {
alert("Cannot convert this file!"); }
});
});
});
</script>
<?php } ?>
</div>
<hr />
<?php } ?>
</div>
<?php
include ('footer.php');
?>
帖子需要转到convertCore.php,其中包含一堆意大利面条,这些意大利面条可以使用命令行工具转换文件。 内部PHP脚本上没有增量器。 仅需要增量来区分页面上的不同GUI元素。 可以在https://github.com/zelon88/HRConvert2上看到该项目的较旧版本。
它不返回任何内容,因为jQuery不知道这个$('rotate1').val();
与...有关
如果这是您要到达的ID,则需要在ID前面加上ID符号#
。 像这样
$('#rotate1').val();
同样,如果这是您要获取的名称属性,请尝试使用此属性...
$('input[name="rotate1"]').val();
在每个标签上贴上相关标签; 选择,输入等
更新资料
确保在Ajax数据调用中,您在key:value对中设置了正确的密钥。 键应该反映元素的名称属性,因为这是我们与php交换信息的地方。
因此,在Ajax的data参数中,这些对应该如下所示:
rotate1:rot,
width1:wid,
height1:hgt,
photoextension1:pext,
userphotofilename1:upfn
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.