why the call backfunction return error?

Question

/*******APP CODE ******/

<aura:application >
    <c:AccountDisplayComponent />
</aura:application>

/*******COMPONENT CODE *********/

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="AccControllerClass">
    <aura:handler name="init" action="{!c.getResults}" value="{!this}" />
    <aura:attribute name="strAccountName" type="Account" default="{'sobjectType':'Account',
                                                                  'Name':''}"/>
    <div class="Text">
        <ui:inputText aura:id="AccountId" label="Account Name" />
    </div>
    <div>
        <ui:Button label="Click Me!" press="{!c.getResults}"/>
    </div>    
</aura:component>

/********JAVASCRIPT CONTROLLER ***********/

({
    getResults : function(component, event) {
        var newAccount= component.find("AccountId").get("v.value");
        var action= component.get("c.saveAccount");
        alert(''+newAccount);
        alert(''+action);
        alert(action.getState());

        action.setParams({
            "acc" :newAccount
        });

   action.setCallback(this,

       function(response){            
           component.set("v.strAccountName",response.getReturnValue());         
           alert(response.getReturnValue());    
             alert('Hello');
                var name = response.getReturnValue();
                alert(name);
                 var state = response.getState();
                alert(state);
                 if (state == "SUCCESS" || response.getState() == "ERROR") {
                        var name = response.getReturnValue();
                     alert(name);
                     alert(action.getReturnValue());
                     console.log(action.getReturnValue());
                        alert("hello from here"+name);
                 }
        });

        $A.enqueueAction(action);
    }
})

/*** APEX CONTROLLER **********/

public with sharing class AccControllerClass {
    @AuraEnabled
    public static Account saveAccount(Account acc){
        System.debug('@@acc'+acc);
        List<Account>  listAccount =new List<Account>();
        listAccount.add(acc);
        insert listAccount;
        return acc;
    }

}

Answer 1

The problem is that the function in your server-side controller requires an account as input:

public static Account saveAccount(Account acc)

You are setting this parameter on the action, but you are using the value of what is typed into the ui:inputText box, which even if it is an account id, it is not an account object.

var newAccount= component.find("AccountId").get("v.value");
action.setParams({"acc" : newAccount});

---

Assuming you wanted to query the details of an account based on it's id, you would want to change the method in your server-side controller to accept an Id, perform a SOQL query, and then return the results.

public with sharing class AccControllerClass {
    @AuraEnabled
    public static Account saveAccount(Id acc){  // this name should be changed since the method isn't saving an account.
        if (acc == NULL){                       // I left it the same just to avoid having to change the lightning component.
            AuraHandledException e = new AuraHandledException('Please input an id');
            e.setMessage('Please input an id');
            throw e;
        }
        Account a = [
            SELECT Id, Name
            FROM Account
            WHERE Id = :acc
        ];
        return a;
    }

}