React JS-在onClick事件后觸發PHP

Question

我試圖從react js腳本通過AJAX調用或在react組件中單擊提交按鈕時調用PHP腳本。 我使用普通的HTML和JQuery進行了此操作，但發現很難使用react實現相同的功能。

一位用戶解釋了輸入的正常流程並將其顯示為警報。 但我希望將輸入值發送到PHP腳本。 的JQuery代碼是：

   $('#button').click(function () {
        alert("first")
        $.ajax({

            type: "GET",
            crossDomain: true,
            url: "http://localhost:8085/Folder1/login.php",
            data: {

                stime: $("#demo1").val(),
                etime: $("#demo2").val(),
                desc: $("#servername").val()
            },

            success: function(data){
                alert(data)
                $('#resultip').html(data);
            },
            error:function(data)
            {
                alert("Data sending failed");
            }
        });

我是新來的響應者，無法獲得任何解釋此響應的文檔。 非常感謝您的幫助。

https://jsfiddle.net/69z2wepo/34020/

Answer 1

您可以在React JS中的handleSubmit()事件上向您的PHP腳本發出GET請求，也可以將AJAX調用放入handleSubmit()

另外，由於您正在執行GET請求，因此不必將其轉換為JSON，因此可以將參數直接發送到外部腳本，這些參數將像這樣GET /test_url.php?first_name=John&last_name=Doe附加到url上然后可以使用$_GET['first_name']在您的PHP代碼中訪問這些參數

handleSubmit(event) {
    event.preventDefault();
    var data = this.state;
   $.ajax({

        type: "GET",
        crossDomain: true,
        url: "http://localhost:8085/Folder1/login.php",
        data: {

            stime: $("#demo1").val(),
            etime: $("#demo2").val(),
            desc: $("#servername").val()
        },

        success: function(data){
            alert(data)
            $('#resultip').html(data);
        },
        error:function(data)
        {
            alert("Data sending failed");
        }
    });
  },

您可以檢查控制台以查看對腳本的GET請求，

這是更新的小提琴： https : //jsfiddle.net/9qewutqk/2/