Question

我试图通过来自react js脚本的AJAX调用或者在react组件中单击提交按钮来调用PHP脚本。我使用普通的HTML和JQuery做到了这一点，但发现很难用反应来实现它。

其中一位用户解释了正常的输入流并将其显示为警报。但我希望将输入值发送到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中的提交事件上向您的PHP脚本发出GET请求，您可以将您的AJAX调用放在handleSubmit()

中

此外，由于您正在进行GET请求，因此您无需将其设为JSON，您可以将参数直接发送到外部脚本，参数将被添加到此类网址GET /test_url.php?first_name=John&last_name=Doe您可以访问使用$_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/

React JS - 在onClick事件后触发PHP

1 个答案: