Facing error in insertion while using webservices and ajax jquery - web-services

Question

WHEN I FILL THE FORM IN HTML,I FACE ERROR OF 500. MY WEBSERVICE IS NOT WORKING. WHEN I COPYPASTE URL AND OPEN IN NEW TABLE THEN IT SHOWS BELOW ERROR.
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true)]
public void addNewUser(string name,string address,string email, string phoneno, string pin)
{
JavaScriptSerializer ser = new JavaScriptSerializer();
string Message = "";
try
{
using (MySqlConnection connection = new MySqlConnection(DBconnect.ConnectionString))
{
MySqlCommand cmd = new MySqlCommand("INSERT INTO users(name,address,email,phoneno,pin) VALUES(#name,#address,#email,#phoneno,#pin)", connection);
cmd.Parameters.AddWithValue("#name", name);
cmd.Parameters.AddWithValue("#address", address);
cmd.Parameters.AddWithValue("#email", email);
cmd.Parameters.AddWithValue("#phoneno", phoneno);
cmd.Parameters.AddWithValue("#pin", pin);
connection.Open();
cmd.ExecuteNonQuery();
connection.Close();
}
Message = "New User is added Successfully.";
}
catch (Exception ex)
{
Message = "Not Added";
}
var JSonData = new
{
Message = Message
};
HttpContext.Current.Response.Write(ser.Serialize(JSonData));
}
<script type="text/javascript">
$(document).ready(function () {
$("#btnAdduser").on('click', function (e)
{
e.preventDefault();
var All_users = {};
All_users.name = $('#name').val();
All_users.address = $('#address').val();
All_users.email = $('#email').val();
All_users.phoneno = $('#phoneno').val();
All_users.pin = $('#pin').val();
var jsonData = JSON.stringify({
All_users: All_users
});
$.ajax({
type: "POST",
url: "http://localhost/WebApi/WebService.asmx?op=addNewUser",
data: jsonData,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
error: OnErrorCall
});
function OnSuccess(response) {
var result = response.d;
if (result == "success") {
$("#msg").html("New record addded successfully :)").css("color", "green");
}
$("#name").val("");
$("#address").val("");
$("#email").val("");
$("#phoneno").val("");
$("#pin").val("");
}
function OnErrorCall(response) {
$("#msg").html("Error occurs :(").css("color", "red");
}
});
});
</script>
*
System.InvalidOperationException: Missing parameter: name. at
System.Web.Services.Protocols.ValueCollectionParameterReader.Read(NameValueCollection
collection) at
System.Web.Services.Protocols.HttpServerProtocol.ReadParameters()
at
System.Web.Services.Protocols.WebServiceHandler.CoreProcessRequest()
*

Answer 1

I tried reproducing your case.
The problem is UseHttpGet = true, change to UseHttpGet = false and also check that attribute in class [System.Web.Script.Services.ScriptService]
and update your AJAX call by WebService.asmx/addNewUser like this, it worked
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<button id="btnAdduser">Test</button>
<script type="text/javascript">
$(document).ready(function () {
$("#btnAdduser").on('click', function (e)
{
e.preventDefault();
var All_users = {};
All_users.name = "Hien";
All_users.address = "Test";
All_users.email = "Test";
All_users.phoneno = "Test";
All_users.pin = "123";
var jsonData = JSON.stringify({
data: All_users
});
$.ajax({
type: "POST",
url:
"http://localhost/WebApi/WebService.asmx/addNewUser",
data: JSON.stringify(All_users),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
error: OnErrorCall
});
function OnSuccess(response) {
var result = response.d;
if (result == "success") {
$("#msg").html("New record addded successfully :)").css("color", "green");
}
$("#name").val("");
$("#address").val("");
$("#email").val("");
$("#phoneno").val("");
$("#pin").val("");
}
function OnErrorCall(response) {
$("#msg").html("Error occurs :(").css("color", "red");
}
});
});
</script>