在onClick事件后响应JS -触发器PHP

Question

我试图通过从react脚本调用AJAX或在react组件中单击submit按钮来调用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中对提交事件向PHP脚本发出GET请求，您可以将AJAX调用放在handleSubmit()中

另外，由于您正在发出GET请求--您不必将其设置为JSON --您可以直接将params发送到您的外部脚本中，所以params将像下面的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/