2017-01-05 30 views
0

正在調用Perl CGI腳本;我可以看到調試日誌獲取參數並執行。在ajax調用過程中獲取狀態碼0跨站點Perl CGI函數

問題是返回結果,狀態碼始終爲0,responseText爲空。

已經嘗試過各種標題選項等,沒有運氣,任何幫助將不勝感激。

的Perl CGI處理程序

#!/usr/bin/perl 
use strict; 
use warnings; 

use CGI; 
use JSON; 
use Data::Dumper qw(Dumper); 

my $q = new CGI; 
my %data; 

open my $FH, '>', 'outfile'; 

if (my $number = $q->param('number')){ 
    if ($number =~ /^\d+$/) { 
      $data{result} = $number % 2 ? 'odd' : 'even'; 
    } else { 
      $data{result} = 'Not a number'; 
    } 

    my $jret = to_json(\%data); 
    print $FH Dumper($jret); 
    close $FH; 

    print $q->header('application/json'); 
    print to_json(\%data); 
} 

HTML代碼

<!DOCTYPE html> 
<html> 
<head> 
<title>[% title %]</title> 
<meta charset='utf-8'> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">  </script> 
    </script> 
</head> 

<body> 
    <div id='result'></div>Enter number: 
    <form> 
    <input type='text' id='number'> 
    <button onclick='test_number();'>Test</button> 

    <script> 
     function test_number() 
     { 
      $.ajax({ 
        type: 'POST', 
        dataType: 'json', 
        url: '/cgi-bin/simple.cgi', 
        data: { 
          'number': $('#number').val() 
        }, 
        success: function(data, textStatus){ 
         alert('request successful'); 
        }, 
        error: function(jqXHR, exception) { 
         msg = 'Request Status: ' + jqXHR.status + ' Status Text: ' + jqXHR.statusText + ' ' + jqXHR.responseText; 
         alert(msg); 
        } 
      }); 
      return false; 
     } 
    </script> 
    </form> 
</body> 
</html> 
+0

請顯示更多的Perl代碼。具體來說,如果有任何其他的'print'語句超出了你所顯示的。 – simbabque

+1

如果狀態爲'0',那麼瀏覽器的開發工具中的控制檯上通常會顯示一條有用的錯誤消息。你需要看看那裏。 – Quentin

+0

你的Perl代碼看起來不錯。沒有什麼問題。您也可以在開發者工具中查看請求。這可能是因爲你的'POST'請求​​實際上並沒有提交表單,而是'data'中的JS對象被序列化爲JSON並作爲請求的主體提交,而不是轉換爲formdata。如果是這樣的話,CGI.pm不能讀取它,'$ q-> param('number')'將會是false,因此你的程序將永遠不會打印任何東西並退出。如果沒有輸出,你什麼也看不見。 – simbabque

回答

0

在表單中點擊提交按鈕時,您運行的JavaScript函數。

此:

  1. 發送Ajax請求
  2. 卸載當前的頁面
  3. 提交表單
  4. 加載一個新的頁面

快速劈

使用type="button"爲您的按鈕元素,所以它不是一個提交按鈕

妥善解決

  1. 設置<form action="/cgi-bin/simple.cgi"這樣的形式提交到正確的位置
  2. 添加name="number"的輸入,所以它被包含在常規表格數據
  3. 添加一種方法來區分表單提交和Ajax請求,例如隱藏輸入
  4. 更新腳本,以便它獲取for米提交它呈現一個適當的HTML文檔而不是JSON
  5. 卸下onclick屬性和結合用JavaScript適當的事件處理程序(其防止表單提交的默認行爲如果JS成功運行)

這樣:

function test_number(event) { 
    event.preventDefault(); 
    $.ajax({ 
     type: 'POST', 
     dataType: 'json', 
     url: '/cgi-bin/simple.cgi', 
     data: { 
      'number': $('#number').val() 
     }, 
     success: function(data, textStatus) { 
      alert('request successful'); 
     }, 
     error: function(jqXHR, exception) { 
      msg = 'Request Status: ' + jqXHR.status + ' Status Text: ' + jqXHR.statusText + ' ' + jqXHR.responseText; 
      alert(msg); 
     } 
    }); 
} 

document.querySelector("form").addEventListener("submit", test_number);