使用PHP生成的Ajax提交表单

时间:2018-05-29 23:25:39

标签: javascript php ajax

我试图让这个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

看到该项目的旧版本

1 个答案:

答案 0 :(得分:0)

它没有返回任何内容,因为jQuery不知道这个$('rotate1').val();与...有关...

如果它是你到达的ID,那么你需要在id的前面放置id符号#。像这样......

$('#rotate1').val();

同样,如果它是您尝试获取的名称属性,请尝试使用此...

$('input[name="rotate1"]').val();

为每个标签添加相关标签;选择,输入等

<强>更新

确保在Ajax数据调用中,您在键:值对中设置了正确的键。密钥应该反映元素的name属性,因为这是我们用php交换信息的地方。

因此,在Ajax的数据参数中,对应该看起来像:

rotate1:rot, 
width1:wid, 
height1:hgt, 
photoextension1:pext,
userphotofilename1:upfn